如何在HTML中自动换行文字?
如何可以超过一个div
(比如说200px
)宽度的文本像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
被包装?
我可以接受任何types的解决scheme,如CSS,jQuery等
尝试这个:
div { width: 200px; word-wrap: break-word; }
你可以像这样使用一个软连字符:
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
这将显示为
aaaaaaaaaaaaaaa- aaaaaaaaaaaaaaa
如果包含的框不够大或者像
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
如果是。
在引导程序3上,确保空格未被设置为“nowrap”。
div { width: 200px; word-break: break-all; white-space: normal; }
div { // set a width word-wrap: break-word }
“ word-wrap
”解决scheme仅适用于支持CSS3
IE和浏览器。
最好的跨浏览器解决scheme是使用你的服务器端语言(PHP或其他)来定位长string,并定期放置在它们的HTML实体​
这个实体很好地打破了长词,并且适用于所有的浏览器。
例如
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
如果单词中没有空格(例如长URL),则唯一能够跨越IE,Firefox,Chrome,Safari和Opera的作品是:
div{ width: 200px; word-break: break-all; }
我发现这是防弹的。
另一种select是使用:
div { white-space: pre-line; }
这将在所有支持CSS1的浏览器中设置所有div元素(这几乎是所有常见的浏览器,早在IE 8中)
这对我有效
word-wrap: normal; word-break: break-all; white-space: normal; display: block; height: auto; margin: 3px auto; line-height: 1.4; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
将此CSS添加到段落。
style="width:420px; min-height:15px; height:auto!important; color:#666; padding: 1%; font-size: 14px; font-weight: normal; word-wrap: break-word; text-align: left"
跨浏览器
.wrap { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }
尝试这个
div{ display: block; display: -webkit-box; height: 20px; margin: 3px auto; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
从CSS技巧的例子:
div { -ms-word-break: break-all; /* Be VERY careful with this, breaks normal words wh_erever */ word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
更多例子在这里 。
在HTML正文中尝试:
<table> <tr> <td> <div style="word-wrap: break-word; width: 800px"> Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip. </div> </td> </tr> </table>
在CSS体内试试:
background-size: auto; table-layout: fixed;
服务器端解决scheme适用于我: $message = wordwrap($message, 50, "<br>", true);
其中$message
是一个stringvariables,包含要分解的字/字符。 50是任何给定分段的最大长度, "<br>"
是你想要插入每个(50)个字符的文本。
使用word-wrap:break-word
属性以及所需的宽度。 主要是以像素为单位,而不是百分比。
width: 200px; word-wrap: break-word;