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

Posted 2023-03-05

【中文标题】如何在固定宽度范围内换行或中断长文本/单词？

【英文标题】：How can I wrap or break long text/word in a fixed width span?

【发布时间】：2013-08-16 00:37:28

【问题描述】：

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

有什么想法吗？

【参考方案1】：

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

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

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

【讨论】：

适用于 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