117

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

有任何想法吗？

4

7 回答 7

214

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

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

于 2013-08-14T07:10:28.077 回答
58

尝试添加以下css white-space：

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal;
}
于 2015-12-17T16:50:08.597 回答
18

像这样

演示

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}
于 2013-08-14T07:09:25.093 回答
3

默认情况下 aspan是一个inline元素......所以这不是默认行为。

您可以span通过添加display: block;到您的 CSS 来实现这种行为。

span {
    display: block;
    width: 100px;
}
于 2013-08-14T07:10:49.757 回答
2

试试这个

span {
    display: block;
    width: 150px;
}
于 2013-08-14T07:16:44.150 回答
0

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

通过将整个跨度定义为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;
}
于 2018-03-19T12:13:14.483 回答
0

就我而言， display: block 按预期破坏了设计。

该max-width物业刚刚救了我。

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

我的代码是

max-width: 255px
overflow:hidden
于 2019-04-05T10:18:29.597 回答