如何在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;