如何在固定宽度的<span>标签内换行或截断长文本/单词？

Question

我想创建一个具有固定宽度的元素，当我在该元素中输入任何内容，如<span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>这样的不带空格的长字符串时，单词会自动断行或换到下一行。

有什么好的想法吗？

- MmD

Answer 1

你可以使用CSS属性word-wrap:break-word;，这将在你的宽度不足以容纳过长的单词时进行断行。

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

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

- Maxime Lorant

---

适用于asp.net标签控件。谢谢！ - etlds

添加white-space: normal可以覆盖可能会干扰的外部样式 :) .. inline-block与block一样有效。 - Katia

对于那些在使用此答案并指定“width”后仍然遇到问题的人，请检查是否存在“white-space: nowrap”属性，否则它将无法正常工作。 - tommyalvarez

Flex不起作用，请参见https://codepen.io/xgqfrms/pen/WNGXqeZ - xgqfrms

@katia提出了一个好观点，关于设置white-space: normal，结果发现去掉white-space: nowrap就是我所需做的一切。 - Filip

Answer 2

尝试使用white-space属性并按如下样式设置：

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

- Gerard de Visser

---

谢谢！我之前一直搞不明白为什么我的文本不换行，原来是因为white-space的缘故。 - mdiehl13

我的问题也得到了解决，一旦我加入了：white-space: normal。 - tnrich

这是一个参考表，如果您需要空格和换行，请查看以下链接：https://css-tricks.com/almanac/properties/w/whitespace/ - Hritik

这个有效：
<span style="color: gray; word-wrap:break-word;">长文本</span> - ozanmut

Answer 3

像这样

演示

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

- Falguni Panchal

---

我的朋友，我想当我在span中设置width:50px;时，只有50px的值显示在该span中，其他值则继续到下一行并在50px中显示！！！ - MmD

@mamal10，请查看Maxime Lorant的解决方案。 - Mr_Green

Answer 4

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

你可以通过添加 display: block; 到 CSS 中让 span 表现出这种行为。

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

- user2681319

Answer 5

试试这个

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

- Eswara Reddy

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

- leopold

Answer 7

在我的情况下，display: block正如预期的那样破坏了设计。

max-width属性救了我。

至于样式，你也可以使用text-overflow: ellipsis。

我的代码是：

max-width: 255px
overflow:hidden

- sh6210