如何在固定宽度范围内换行或中断长文本/单词？答案

【问题标题】：How can I wrap or break long text/word in a fixed width span?如何在固定宽度范围内换行或中断长文本/单词？
【发布时间】：2013-08-16 00:37:28
【问题描述】：

我想创建一个固定宽度的跨度，当我在该跨度中键入任何内容时，例如<span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>，一长串无间隔的文本，单词会中断或换行到下一行。

有什么想法吗？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

&lt;span&gt;VeryLongLongLongLongLongLongLongLongLongLongLongLongExample&lt;/span&gt;

【讨论】：

适用于 asp.net 标签控件。谢谢！
添加 white-space: normal 有助于覆盖可能妨碍的外部样式:) .. inline-block 和 block 一样有效
如何打破块元素内的两个跨度？
对于使用此答案后仍有问题的人，请务必指定“宽度”，否则可能无法正常工作
对于那些在使用此答案并指定 'width' 后仍然遇到问题的人，请检查是否存在 'white-space: nowrap' 道具，否则将无法正常工作

【解决方案2】：

尝试在 css 中添加white-space:

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

【讨论】：

谢谢！我不明白为什么我的文字从不换行！空白是原因。
我的问题在我输入后也得到了解决：white-space: normal
这是一个参考表，以防您需要空格和换行：css-tricks.com/almanac/properties/w/whitespace

【解决方案3】：

这样

DEMO

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

【讨论】：

我的朋友我想放 span width:50px;我跨度中的值仅以 50px 显示，其他值继续到下一行并以 50px 显示！！！
@mamal10 检查 Maxime Lorant 的解决方案。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案7】：

在我的例子中， display: block 破坏了预期的设计。

max-width 属性刚刚救了我。

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

我的代码是

max-width: 255px
overflow:hidden

【讨论】：