标签: word-break
溢出换行和断字之间的区别？
overflow-wrap/word-wrap和word-break之间的确切区别是什么？任何人都可以告诉我,打破很长链接的更好的方法是什么？大多数人说你应该使用word-break和overflow-wrap,但它看起来不合逻辑.我认为将overflow-wrap与自动换行相结合以获得更好的跨浏览器支持是最好的方法.你怎么看？
推荐指数
解决办法
查看次数
CSS中更聪明的单词突破？
如果我只穿上word-break: break-all一个元素,我经常会这样做:
大家好,我正在输入一个
太长而不适合的消息!
显然这会更好:
大家好,我正在输入一条
太长而不合适的消息!
但同时如果有人写道:
BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH !!!!!!
然后我希望它是:
BLAAAAAAAAARRRRRRRRRR
RGGGGGGGGHHHHHHHH !!!!!!
我似乎无法找到实际做到这一点的方法.
请注意,元素的宽度不固定,可能会更改.
推荐指数
解决办法
查看次数
如有必要,我如何允许文本包含在单词中？
我正在寻找最好的解决方案,允许文本在必要时包含在单词的中间.最好的,我的意思是大多数浏览器兼容,并且会在单词中断之前支持单词分隔符.
如果标记看起来比我的好,也会有所帮助(参见我的回答).
编辑:
请注意,这是专门针对用户生成的内容.
编辑2:
该网站上大约25%的Firefox用户仍在使用v3.0或更低版本,因此支持他们至关重要.这是基于上个月的数据(约121,000次访问).
推荐指数
解决办法
查看次数
如何使用自动CSS连字符和`word-break:break-all`？
我正在使用word-break: break-all;并想知道如何让浏览器自动插入连字符,如MDN示例中所示.
div {
width: 80px;
height: 80px;
display: block;
overflow: hidden;
border: 1px solid red;
word-break: break-all;
hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
}<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>这样文本看起来像这样:
aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa
我也创建了一个JSFiddle.
这需要在IE9/IE10中运行,但如果它在Firefox和Chrome中也可以使用它会很好.
推荐指数
解决办法
查看次数
CSS,Text溢出表格单元格
我正在研究虚拟机,所以我无法复制代码......然后我将发布屏幕.问题是微不足道的我想但我不能处理它...请给我一些建议:
表代码:https: //dl.dropboxusercontent.com/u/108321090/WWW1.png
CSS代码和网站视线:https: //dl.dropboxusercontent.com/u/108321090/WWW.png
所以一般情况下,你可以在第二个链接上看到,行中有一个文本,它不需要包装,它一直作为通道进入并离开表列边界.
推荐指数
解决办法
查看次数
使用CSS打破单词
当<p>标签中的文字太长时,看起来像这样,如何用CSS防止这种情况？我已经尝试过CSS属性,word-break: break-all;但Firefox和Opera不支持这个属性,而且其他"正常"的单词也在破坏.所以我想要打破很长的单词,而不是短单词,取决于白色的宽度<div>.
body {
background-color: #ccc;
}
h2 {
float: left;
color: #525254;
margin: 0px;
font: bold 15px Arial, Helvetica, sans;
}
.post {
background-color: #fff;
float: left;
clear: both;
padding: 20px;
width: 500px;
border-bottom: solid 1px #ddd;
}
.post_cell {
display: table-cell;
vertical-align: middle;
}
.post_body {
display: table-cell;
width: 400px;
opacity: 0.8;
}
.profile_img {
border: solid 3px #ccc;
width: 48px;
height: 48px;
margin: 0px 15px;
}
.post_info {
color: #c3c3c3;
font: …推荐指数
解决办法
查看次数
Css表示允许在子div上使用break-word的元素,但也可以扩展以获取其子元素的宽度
我正在尝试确定是否可以为支持的元素创建css word-wrap:break-word,但是也可以扩展以在无法断开时获取其子元素的宽度.
<html>
<style>
.outer {
background-color:red;
word-wrap:break-word;
}
</style>
<div class="outer">
User generated content:
<a href="http://www.google.com">http://anannoyinglylongurlthatcausesthepagetogrowtolongunlessIusewordwrapbreakwordasdfasfasdfasdfasdfasdfasdfsadfasdfadsf</a>
<table>
<tr>
<td>asdfasdfadsffdsasdfasdfsadfafsd</td>
<td>asdfasdfadsffdaasdfassdffaafasds</td>
</tr>
</table>
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
</div>
</html>
在上面的示例中,url正确中断,但如果窗口变得比表格窄,则表格和img会溢出红色外部div.
如果我进行外部div显示:inline-block或display:table,红色外部div正确扩展以包含内容,但如果窗口比url窄,则url不会中断.
我只需要在WebKit中工作(在Android上),并且我试图找到一个只有CSS(没有Javascript)的解决方案.
推荐指数
解决办法
查看次数
自动换行:break-word和word-break:break-word之间的区别
我需要在某个地方修复一些CSS,因为我的文字没有环绕,而是如果它是一个非常长的单词而无限期地继续下去.
就像在大多数情况下一样,我word-wrap: break-word;在我的CSS文件中尝试过它并没有用.
然后,令我惊讶的是,根据Google Chrome开发者工具的建议,我尝试word-break: break-word;了解决了我的问题.我对此感到震惊,所以我一直在谷歌上搜索这两者之间的区别,但我没有看到这个问题.
此外,我不认为W3没有提及它的word-break: break-word;记录行为.我在Safari和Chrome上测试了它,它在两者上都很完美,但是我很犹豫,因为我没有在任何地方提到它.word-break: break-word;
推荐指数
解决办法
查看次数
JQuery可以在第二行包装之前检测到行中的最后一个元素吗？
<style>
.ms_menu ul{list-style:none;}
.ms_menu ul li{float:left; padding:5px; border-right:1px solid #000000;}
.ms_menu ul li:last-of-type{border-right:none;}
</style>
示例html:
<div class="ms_menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
我有一个顶级导航菜单,其中包含一个带有LI左侧浮动的UL.
每个LI都有一个CSS样式{border-right 1px solid},它充当每个菜单选项之间的分隔符,我使用了CSS选择器last-of-type来删除最后一个LI上的border-right.
这一切看起来都很棒,直到浏览器窗口重新调整大小并且一些LI下拉到第二行.最后一个子样式规则仍然可以根据需要应用,但此时我还想在它包装到第二行之前从最后一个LI中删除border-right.
有没有jQuery或一般的Javascript方法来检测自动换行/换行之前一行的最后一个元素？
推荐指数
解决办法
查看次数
Html2pdf不支持word-break:break-all css
我每个人都在使用html2pdf,它不支持word-break:break-all css任何想法？
例
<td style="width:30%;word-break:break-all ;">
testtestetstetstetstetstettstetstetstetstetstetstetstetstetstetstets
</td>
输出pdf取宽度超过30%,如字符串长度大小
输出pdf:testtestetstetstetstetstettstetstetstetstetstetstetstetstetstetstets
我想输出:
testtestetstetstetstetstettstets
tetstetstetstetstetstetstetstets
推荐指数
解决办法
查看次数
标签 统计
word-break ×10
css ×9
html ×5
word-wrap ×5
css-tables ×1
css3 ×1
html2pdf ×1
jquery ×1
line-breaks ×1
php ×1
webkit ×1