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

104

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

有任何想法吗？

html css

— محمدکثیری
source

191

您可以使用CSS属性word-wrap:break-word;，如果单词的跨度太长，则会使单词断裂。

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

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

展开摘要

— 马克西姆·洛兰
source

1

对于asp.net标签控件，效果很好。谢谢！

— etlds 2014年

41

添加white-space: normal有助于覆盖可能妨碍您使用的外部样式：） .. inline-block以及block

— Katia 2015年

打破块元素内的两个范围怎么办？

— 丹尼尔·斯普林格

对于那些在使用此答案后仍然遇到问题的人，请确保指定“宽度”，否则可能无法正常工作

— -Staccato

它需要有一个宽度才能知道在哪里断裂

— DFSFOT

40

尝试在CSS之后添加white-space：

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

— 杰拉德·德维瑟
source

5

谢谢！我不知道为什么我的文字从来没有换行！原因是空格。

— mdiehl13 '19

1

输入以下内容后，我的问题也已修复：white-space: normal

— majorBummer

如果需要空格和包装，请参考以下表格：css-tricks.com/almanac/properties/w/whitespace

— Hritik

16

像这样

演示

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

— 法格尼·潘查（Falguni Panchal）
source

我的朋友，我想放跨度宽度：50px；我范围中的值仅以50px显示，其他值继续到下一行并以50px显示！！！

— 13年

1

@ mamal10检查Maxime Lorant的解决方案。

— Mr_Green

3

默认情况下，a span是inline元素...因此不是默认行为。

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

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

1

试试这个

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

— 埃斯瓦拉·雷迪（Eswara Reddy）
source

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

— 利奥波德
source

0

就我而言，display：block违反了设计。

的 max-width物业只是救了我。

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

我的代码是

max-width: 255px
overflow:hidden

— sh6210
source