如何在HTML中自动换行文字？

Question

怎么样的文字aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa超过div(比方说200px)的宽度？

我对任何类型的解决方案都很开放,比如CSS,jQuery等.

Answer 1

试试这个:

div {
    width: 200px;
    word-wrap: break-word;
}

Answer 2

在bootstrap 3上,确保空白区域未设置为"nowrap".

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Answer 3

您可以像这样使用软连字符:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

这将显示为

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果包含的盒子不够大,或者如果

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是.

Answer 4

   div {
    // set a width
    word-wrap: break-word
}

' word-wrap'解决方案仅适用于IE和浏览器支持CSS3.

最好的跨浏览器解决方案是使用您的服务器端语言(PHP或其他)来定位长字符串并定期在其中放置html实体​ 这个实体可以很好地打破长字,并适用于所有浏览器.

例如

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Answer 5

这对我有用

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Answer 6

如果单词中没有空格(例如长URL),那么唯一可以在IE,Firefox,chrome,safari和opera中使用的是:

div{
    width: 200px;  
    word-break: break-all;
}

我发现这是防弹的.

Answer 7

另一个选择也是使用:

div
{
   white-space: pre-line;
}

这将在所有支持CSS1的浏览器中设置所有div元素(这几乎是所有常见的浏览器,早在IE 8)