当使用“所有单词”时，有没有办法包装html文本？

Question

  

可能重复：
  Is there a way to word-wrap text in a div?

我有这个css和html问题。我有一个描述，我想把它放在一个100px宽的盒子里，我希望文本在页面上流动。我已经设置了像这样的div：

<div style="width:100px; border:1px Solid Black; height:200px; overflow:scroll; "><p>text here...</p></div>

然而，当我输入文本并且没有空格时，文本不会换行。因此，如果用户要输入一个跨度超过100px宽的单词，那么文本将会向右移动，我不想要...

任何阻止这种情况的方法？我注意到facebook墙贴不做这种行为......

Answer 1

最直接的方法是使用word-wrap: break-word

See it in action

Answer 2

1. CSS解决方案： 使用overflow：hidden和overflow-x：hidden

2. 后端解决方案： 如果您使用像php这样的脚本语言来生成页面， 使用“自动换行”技术来打破长字数据。

Answer 3

请参阅this question。

word-wrap : break-word是最兼容的方式，但在一些仍被广泛使用的浏览器中无济于事。

Answer 4

将height更改为min-height并移除overflow并使用word-wrap: break-word：

<div style="width:100px; border:1px Solid Black; min-height:200px;word-wrap: break-word; "><p>text here...</p></div>

但请记住，如果用户没有输入任何空格，浏览器就不会将其分成多行！