30

我想限制一段文本的宽度，这样它看起来就像在每行的 ned 处都有 br 。

像这样的东西：

Texttttttttttttttttttttt
tttttttttttttttttttttttt
tttttttttttttttttttttttt

由此：

文字tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

我试图指定 div 或 p 的宽度，但它对我不起作用。有什么建议么？

4

10 回答 10

49

您可以像这样应用 css：

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

通常浏览器不会断词，但word-wrap: break-word;也会强制它断词。

演示：http: //jsfiddle.net/Mp7tc/

有关自动换行的更多信息

于 2013-03-14T12:36:25.813 回答
14 
 display: inline-block;
max-width: 80%;
height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
于 2017-08-31T06:52:49.477 回答
3

您可以使用word-wrap : break-word;

于 2013-03-14T12:36:44.353 回答
2

尝试

<div style="max-width:200px; word-wrap:break-word;">Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
于 2013-03-14T12:36:07.713 回答
1

使用 CSS 属性word-wrap: break-word;

请参见此处的示例：http: //jsfiddle.net/emgRF/

于 2013-03-14T12:37:49.080 回答
0

试试这个：

<style> 
p
{
    width:100px; 
    word-wrap:break-word;
}
</style>

<p>Loremipsumdolorsitamet,consecteturadipiscingelit.Fusce non nisl
non ante malesuada mollis quis ut ipsum. Cum sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus. Cras ut adipiscing dolor. Nunc congue, 
tellus vehicula mattis porttitor, justo nisi sollicitudin nulla, a rhoncus lectus lacus 
id turpis. Vivamus diam lacus, egestas nec bibendum eu, mattis eget risus</p>
于 2013-03-14T12:38:36.917 回答
0

我认为您要做的是包装没有空格的长文本。

看看这个：Hyphenator.js和它的演示。

于 2013-03-14T12:39:30.103 回答
0 
<style>
     p{
         width:     70%
         word-wrap: break-word;
     }
</style>

这在我的情况下不起作用。添加以下样式后效果很好。

<style>
     p{
        width:     70%
        word-break: break-all;
     }
</style>
于 2013-08-26T14:58:29.503 回答
0 
word-break:break-all;

为我完成了这项工作

从：

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

到：

qqqqqqqqqqqqqqqqq

qqqqqqqqqqqqqqqqq

qqqqqqqqqqqqqqqqq

qqqqqqqqqqq

word-wrap: ...

不工作

于 2021-07-05T10:23:32.813 回答
0

这里的许多答案都非常好并且非常相似。我担心的是以像素为单位指定宽度，这意味着文本在高分辨率屏幕上可能看起来很皱。最好根据一行中的最大字符数来指定宽度。我还喜欢在<div>小型单文件 index.html 项目中指定样式。对于现实项目，当然，样式应该进入一个单独的 css 文件。

<div style="word-wrap: break-word; max-width: 50ch;>Your text goes here</div>
于 2022-01-23T01:20:25.877 回答