Question

我想创建一个具有固定宽度的跨度，当我在<span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>范围内键入任何内容时，会出现一长串非间隔文本，单词会断开或换行到下一行。

有什么想法吗？

Answer 1

您可以使用CSS属性word-wrap:break-word;，如果它们对于跨度宽度太长，会破坏单词。

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

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Answer 2

尝试以下css：

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

Answer 3

喜欢这个

<强> DEMO

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

Answer 4

默认情况下，span是inline元素...所以这不是默认行为。

您可以通过将span添加到CSS来使display: block;以这种方式行事。

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

Answer 5

试试这个

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

Answer 6

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

通过将整个范围定义为 display：inline-block ，您可能很难显示图像。

因此我更喜欢定义这样的范围：

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;
}

Answer 7

在我的情况下，display：block正在破坏设计。

max-width属性刚刚救了我。

对于样式，您也可以使用text-overflow: ellipsis。

我的代码是

max-width: 255px
overflow:hidden

Answer 8

我添加到我的代码后面。与上述类似的答案。

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

如何在固定宽度范围内包装或断开长文本/单词？

8 个答案: