如何限制文本宽度

我想限制文本块的宽度，以便它看起来像在每行的内容中都有br。如何限制文本宽度

事情是这样的：

Texttttttttttttttttttttt 
tttttttttttttttttttttttt 
tttttttttttttttttttttttt

从这：

Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

我试图指定div的或P的宽度，但它并没有为我工作。有什么建议么？

来源

2013-03-14 Taboo Loco

你可以应用CSS是这样的：

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

通常的浏览器不破的话，但word-wrap: break-word;将迫使它打破的话了。

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

更多信息有关word-wrap

来源

2013-03-14 12:36:25

感谢它的工作。 – 2013-03-14 12:42:26

尝试

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

来源

2013-03-14 12:36:07

最大宽度是不够的：http://jsfiddle.net/Mp7tc/1/您还需要告诉浏览器，它可以打破的话，因为它只会话后添加换行符符号（而不是空间或类似的东西） – 2013-03-14 12:39:09

是的..我改变了它。 – 2013-03-14 12:41:08

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

来源

2013-03-14 12:36:44

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

看到这里的例子：http://jsfiddle.net/emgRF/

来源

2013-03-14 12:37:49 henser

+1现场示例。但浏览器兼容性呢？ – 2013-03-14 12:41:17

试试这个：

<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-14 12:38:36 Kamil

我觉得你要做的是将长文本无空格地换行。

看看这个：Hyphenator.js它是demo。

来源

2013-03-14 12:39:30

JavaScript是不是必须的，如果他可以用CSS来做到这一点，或者？ – Kamil 2013-03-14 12:43:22

@ kamylko你是对的。我只是想提供更多的选择 – 2013-03-14 12:45:05

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

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

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

来源

2013-08-26 14:58:29

display: inline-block; 
max-width: 80%; 
height: 1.5em; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

来源

2017-08-31 06:52:49 Lekhraj

虽然这段代码可以解决问题，但它并不能解释为什么或如何回答问题。请[请提供您的代码解释]（// meta.stackexchange.com/q/114762/269535），因为这确实有助于提高帖子的质量。请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。 **举报人/评论者：** [仅限代码解答，例如downvote，请勿删除！]（// meta.stackoverflow.com/a/260413/2747593） – Patrick 2017-08-31 08:26:40

如何限制文本宽度

回答

相关问题