如何在HTML文本换行?

像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa这样超过div(比如200px)宽度的文本如何被包装?

我是开放的任何一种解决方案，如CSS, jQuery等。

539785 次浏览
小开
最佳答案

试试这个:

div {
width: 200px;
word-wrap: break-word;
}
小开

你可以像这样使用软连字符:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

这将显示为

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

如果装盒不够大，或者

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

如果是的话。

小开 
div {
/* Set a width for element */
word-wrap: break-word
}

'word-wrap'解决方案仅适用于支持CSS3的IE和浏览器。

最好的跨浏览器解决方案是使用您的服务器端语言(php或其他语言)来定位长字符串，并定期在其中放置html实体​ 这个实体很好地分割了长单词，并且适用于所有浏览器

如。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
小开
使用word-wrap:break-word属性以及所需的宽度。主要是, 宽度以像素为单位，而不是百分比

width: 200px;
word-wrap: break-word;
小开

一个适合我的服务器端解决方案是:$message = wordwrap($message, 50, "<br>", true);，其中$message是一个字符串变量，包含要分解的单词/字符。50是任何给定段的最大长度，而"<br>"是你想要每(50)个字符插入的文本。

小开

将此CSS添加到段落中。

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;
小开

在IE、Firefox、chrome、safari和opera中，如果单词中没有空格(比如一个很长的URL)，唯一适用的方法是:

div{
width: 200px;
word-break: break-all;
}

我发现这个是防弹的。

小开

在引导3中，确保空白没有设置为“nowrap”。

div {
width: 200px;
word-break: break-all;
white-space: normal;
}
小开

另一种选择也使用:

div
{
white-space: pre-line;
}

这将在所有支持CSS1中的浏览器中设置你的所有div元素(这几乎是所有常见的浏览器，直到IE 8)

小开

试试这个

. 
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;
}

属性text-overflow:省略号add…而线夹则显示线数。

小开

来自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;
}

更多的例子在这里。

小开

Cross Browser

.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+ */
}
小开

在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;
小开

这对我很有效

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;
小开

试试这个

div {display: inline;}
小开

我已经使用bootstrap。 我的html代码看起来像..

<div class="container mt-3" style="width: 100%;">
<div class="row">
<div class="col-sm-12 wrap-text">
<h6>
text content
</h6>
</div>
</div>
</div>

CSS

.wrap-text {
text-align:justify;
}
小开

你可以使用这个CSS

p {
width: min-content;
min-width: 100%;
}
小开

试一试:

overflow-wrap: break-word;
小开 
<p style="word-wrap: break-word; word-break: break-all;">
Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
</p>
小开

试试这个CSS属性-

overflow-wrap: anywhere;

提交答案