How can I wrap or break long text/word in a fixed width span?

我想创建一个具有固定宽度的 span，当我在 span 中键入任何内容(如 <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>)时，它是一个非间隔的长字符串，单词会中断或换行到下一行。

有什么想法吗？

290552 次浏览
小开

像这样

演示

  li span{
display:block;
width:50px;
word-break:break-all;
}
小开
最佳答案

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

span {
display:block;
width:150px;
word-wrap:break-word;
}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

小开

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

通过将 display: block;添加到 CSS 中，可以使 span按照这种方式工作。

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

试试这个

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

试试下面的 css 加上 white-space:

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

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

通过将整个跨度定义为 内联块显示，您可能很难显示图像。

因此，我倾向于这样定义跨度:

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

在我的例子中，display: block 打破了设计的初衷。

The max-width property just saved me.

在造型方面，你也可以使用 text-overflow: ellipsis。

我的原则是

max-width: 255px
overflow:hidden

提交答案