使用CSS拆分单词
当<p>标签中的文本太长时，会出现这样的情况，如何使用CSS来防止这种情况？我试过CSS属性word-break: break-all;，但是火狐和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: normal 12px Arial, Helvetica, sans;
margin-left: 8px;
}
a.no_style {
color: inherit;
text-decoration: inherit;
font: inherit;
}
p {
float: left;
clear: both;
color: #525254;
margin: 0px;
padding: 0px;
line-height: 18px;
font: normal 15px Arial, Helvetica, sans;
word-wrap: break-word;
}<div class="post">
<div class="post_cell">
<input type="checkbox" />
</div>
<div class="post_cell">
<img class="profile_img" src="" height="48">
</div>
<div class="post_body">
<div class="post_details">
<h2>
<a href="javascript:void(0)" target="_blank" class="no_style">user</a>
</h2>
<span class="post_info">
<span class="passed_time">15 hours ago</span> |
<a href="javascript:void(0)" class="no_style">3 Comments</a>
</span>
</div>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>
</div>
你可以在这里查看更多信息：http://jsfiddle.net/Le4zK/16/
回答 6
Stack Overflow用户
发布于 2011-09-10 17:06:38
编写此word-wrap: break-word;而不是word-break: break-all;
编辑:
也许这是display:table属性的一个错误。我在css中做了一些更改:将display:table放在parent目录中。
.post{
background-color: #fff;
float: left;
clear: both;
padding: 20px;
width: 500px;
border-bottom: solid 1px #ddd;
display:table;
}从.post_body css中删除display:table-cell：
.post_body{
width: 580px;
opacity: 0.8;
}检查此example是否适用于您。
Stack Overflow用户
发布于 2011-09-10 17:35:11
很久以前，我试图解决这个问题，但我找不到任何css only跨浏览器的解决方案，所以我最终使用javascript在长词中插入了零宽度空格​：
var breakableLongWord = '';
for( var i = 0; i < longWord.length; i += 10 ) {
if( i ) breakableLongWord += String.fromCharCode( 8203 );
breakableLongWord += longWord.substr( i, 10 );
}正如我所说的，这是很久以前的事了，所以你也许能够找到一个使用更新的浏览器技术的更好的解决方案。
Stack Overflow用户
发布于 2011-09-10 17:11:06
正确的属性是word-wrap: break-word。
可以使用word-wrap属性指定normal或break-word值。normal表示文本将延伸框的边界。break-word表示文本将换行到下一行。
IE 5.5+、Firefox 3.5+以及Chrome和Safari等WebKit浏览器都支持word-wrap。
https://stackoverflow.com/questions/7370704
复制相似问题
腾讯云开发者
