如何限制文字宽度

时间:2013-03-14 12:33:45

标签: html css

我想限制一个文本块的宽度,所以看起来它在每行的ned处都是br。

这样的事情:

Texttttttttttttttttttttt
tttttttttttttttttttttttt
tttttttttttttttttttttttt

由此:

Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

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

9 个答案:

答案 0 :(得分:34)

你可以像这样申请css:

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

通常浏览器不会破坏单词,但word-wrap: break-word;也会强制它破坏单词。

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

有关word-wrap

的更多信息

答案 1 :(得分:7)

$color_name

答案 2 :(得分:3)

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

答案 3 :(得分:1)

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

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

答案 4 :(得分:1)

我认为你要做的是将没有空格的长文本换行。

看看这个:Hyphenator.js,它是demo

答案 5 :(得分:0)

尝试

<div style="max-width:200px; word-wrap:break-word;">Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>

答案 6 :(得分: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>

答案 7 :(得分:0)

<style>
     p{
         width:     70%
         word-wrap: break-word;
     }
</style>

这不符合我的情况。添加以下样式后,它工作正常。

<style>
     p{
        width:     70%
        word-break: break-all;
     }
</style>

答案 8 :(得分:0)

word-break:break-all; 

为我做了工作

来自:

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq

到:

qqqqqqqqqqqqqqqqqq

qqqqqqqqqqqqqqqqqq

qqqqqqqqqqqqqqqqqq

qqqqqqqqqqqq

word-wrap: ... 

没用