如何在一个固定的宽度范围内包装或拆分长文本/单词?

I want to create a span with a fixed width that when I type any thing in the span like <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, a long string of non-spaced text, the word(s) break or wrap to next line.

我想要创建一个具有固定宽度的span，当我在span中输入任何东西时，比如 lgasdfjksdajgsdajgdsgdsgdsglksaddfasdfaddfasdfasdfasdfasdfasdfasdfddkjk ，一个由非间隔文本组成的长字符串，单词(s)断裂或缠绕到下一行。

Any ideas?

什么好主意吗?

7 个解决方案

#1

125

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.

您可以使用CSS属性:换行:break-word;如果字对您的跨度宽度来说太长，它将断行。

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

#2

Like this

像这样

DEMO

演示

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

#3

Try following css:

试试下面的css:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

#4

By default a span is an inline element... so that's not the default behavior.

在默认情况下，span是一个内联元素……这不是默认行为。

You can make the span behave that way by adding display: block; to your CSS.

您可以通过添加display: block来实现span的行为;你的CSS。

span {
    display: block;
    width: 100px;
}

#5

Try this

试试这个

span {
    display: block;
    width: 150px;
}

#6

Just to extend the pratical scope of the question and as an appendix to the given answers: Sometimes one might find it necessary to specify the selectors a little bit more.

只是为了扩展这个问题的实际范围，并作为给定答案的附录:有时人们可能会发现有必要多指定一些选择器。

By defining the the full span as display:inline-block you might have a hard time displaying images.

通过将整个跨度定义为display:inline-block，您可能很难显示图像。

Therefore I prefer to define a span like so:

因此我更喜欢这样定义一个跨度:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

#7

-3

I added to my code behind. Similar answer as above.

我在后面添加了代码。相似的答案。

   Dim lblSite As Label
   lblSite.Text = "lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk"
   lblSite.Attributes.Add("style", "display:inline-block;width:175px;word-wrap:break-word;white-space: normal")

#1

125