如何将超出一个 div
(比如 200px
)宽度的文本像 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
进行自动换行?
我接受任何形式的解决方案,例如 CSS、jQuery 等。
。
<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>
body
background-size: auto;
table-layout: fixed;
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;
}
更多的例子在这里。
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;
我已经使用了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;
}
text-justify
类,因此您可以使用它来代替.wrap-text
。 - barbsan试试这个
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: ellipsis可以在文本溢出时添加省略号,而line-clamp则用于显示行数。
你可以使用这个CSS
p {
width: min-content;
min-width: 100%;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
overflow-wrap CSS 属性适用于内联元素,用于设置浏览器是否应该在无法换行的字符串中插入换行符,以防止文本溢出其行框。overflow-wrap: anywhere | break-word
试试这个
div {display: inline;}
$message = wordwrap($message, 50, "<br>", true);
,其中$message
是包含要拆分的单词/字符的字符串变量。50是任何给定段落的最大长度,"<br>"
是你想插入每个(50)字符的文本。尝试:
overflow-wrap: break-word;
text-overflow:ellipsis
,但这并不是这个问题的正确答案。他想要换行而不是截断溢出部分。 - Spudley