怎样包装aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
超过div
(say 200px
)宽度的文本?
我愿意接受任何解决方案,例如CSS,jQuery等。
怎样包装aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
超过div
(say 200px
)宽度的文本?
我愿意接受任何解决方案,例如CSS,jQuery等。
Answers:
试试这个:
div {
width: 200px;
word-wrap: break-word;
}
word-break: break-all;
在普通文本中使用then时,它会在中间打断单词,这很丑。。。我们不能同时使用两种行为吗?
word-break: break-all
,不是word-wrap: break-all
。容易犯的错误
在引导程序3上,确保未将空白设置为“ nowrap”。
div {
width: 200px;
word-break: break-all;
white-space: normal;
}
white-space: normal;
在它起作用之前我也需要。
您可以像这样使用软连字符:
aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa
这将显示为
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
如果包含的盒子不够大,或者
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
如果是。
­
呢?
aaaaaa...aaaaa
变成a­a­a­a­a­a­a...a­a­a­a
吗?
div {
// set a width
word-wrap: break-word
}
在“ word-wrap
”解决方案仅适用于IE浏览器和浏览器的支持CSS3
。
最好的跨浏览器解决方案是使用服务器端语言(php或其他语言)查找长字符串,并以固定的间隔将其放置在html实体中。​
该实体很好地打断了长单词,并且可在所有浏览器上使用。
例如
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
如果单词中没有空格(例如长网址),则唯一可在IE,Firefox,chrome,safari和Opera上运行的代码是:
div{
width: 200px;
word-break: break-all;
}
我发现这是防弹的。
将此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"
text-overflow:ellipsis
下一个家伙一样喜欢,但这不是对这个问题的正确答案。他希望自动换行,而不是截断溢出。
对我有用的服务器端解决方案是:$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:省略号add ...和line-clamp显示行数。
在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;
我用过引导程序。我的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
尝试:
overflow-wrap: break-word;
使用word-wrap:break-word
属性以及所需的宽度。主要是将
宽度以像素为单位,而不是以百分比为单位。
width: 200px;
word-wrap: break-word;