Html 如何限制文本宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15409429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to limit text width
提问by Taboo Loco
I would like to limit the width of a block of text so it will look like it has br at the ned of each line.
我想限制一个文本块的宽度，这样它看起来就像在每行的 ned 处都有 br。
Something like this:
像这样的东西：
Texttttttttttttttttttttt
tttttttttttttttttttttttt
tttttttttttttttttttttttt
From this:
由此：
Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
I have tried to specify the div's or p's width, but it didn't work for me. Any suggestions?
我试图指定 div 或 p 的宽度，但它对我不起作用。有什么建议？
回答by Viktor S.
You can apply css like this:
您可以像这样应用 css：
div {
word-wrap: break-word;
width: 100px;
}
Usually browser does not break words, but word-wrap: break-word;will force it to break words too.
通常浏览器不会断词，但word-wrap: break-word;也会强制它断词。
Demo: http://jsfiddle.net/Mp7tc/
演示：http: //jsfiddle.net/Mp7tc/
More info about word-wrap
有关自动换行的更多信息
回答by Lekhraj
display: inline-block;
max-width: 80%;
height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
回答by Devang Rathod
You can use word-wrap : break-word;
您可以使用 word-wrap : break-word;
回答by henser
use css property word-wrap: break-word;
使用 css 属性 word-wrap: break-word;
see example here: http://jsfiddle.net/emgRF/
请参阅此处的示例：http: //jsfiddle.net/emgRF/
回答by Kamil
Try this:
尝试这个：
<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>
回答by ebram khalil
I think what you are trying to do is to wrap long text without spaces.
我认为您要做的是在没有空格的情况下包装长文本。
look at this :Hyphenator.jsand it's demo.
看看这个：Hyphenator.js和它的演示。
回答by shailesh mangal
<style>
p{
width: 70%
word-wrap: break-word;
}
</style>
This wasn't working in my case. It worked fine after adding following style.
这在我的情况下不起作用。添加以下样式后效果很好。
<style>
p{
width: 70%
word-break: break-all;
}
</style>
回答by Vishnu R
Try
尝试
<div style="max-width:200px; word-wrap:break-word;">Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
