像aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
这样超过div
(比如说200px
)宽度的文字怎么会被包裹?
我对任何类型的解决方案都很开放,比如CSS,jQuery等。
试试这个:
div {
width: 200px;
word-wrap: break-word;
}
对我有用的服务器端解决方案是:$message = wordwrap($message, 50, "<br>", true);
,其中$message
是一个字符串变量,包含要分解的单词/字符。 50是任何给定段的最大长度,"<br>"
是您希望每(50)个字符插入的文本。
试试这个
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:省略号添加...和line-clamp显示行数。
来自CSS Tricks的示例:
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;
}
更多例子here。
在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;
试试这个
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;
}
使用word-wrap:break-word
属性以及所需的宽度。主要是将宽度以像素为单位,而不是百分比。
width: 200px;
word-wrap: break-word;
在bootstrap 3上,确保空白区域未设置为“nowrap”。
div {
width: 200px;
word-break: break-all;
white-space: normal;
}
您可以像这样使用软连字符:
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
这将显示为
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
如果包含的盒子不够大,或者如果
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
如果是。
div {
// set a width
word-wrap: break-word
}
'word-wrap
'解决方案仅适用于支持CSS3
的IE和浏览器。
最好的跨浏览器解决方案是使用您的服务器端语言(PHP或其他)来定位长字符串并定期在其中放置html实体​
这个实体很好地打破了长字,并适用于所有浏览器。
EG
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
如果单词中没有空格(例如长URL),那么唯一可以在IE,Firefox,chrome,safari和opera中使用的是:
div{
width: 200px;
word-break: break-all;
}
我发现这是防弹的。
这对我有用
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
{
white-space: pre-line;
}
这将在所有支持CSS1的浏览器中设置所有div元素(这几乎是所有常见的浏览器,早在IE 8)
.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+ */
}
将此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"