Question

screenshot

当<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: 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/

Answer 1

写下word-wrap: break-word;而不是word-break: break-all;

编辑：

这可能是display:table属性的错误。我在css中做了一些更改：将display:table放入parent div。

.post{
    background-color: #fff;
    float: left;
    clear: both;
    padding: 20px;
    width: 500px;
    border-bottom: solid 1px #ddd;
    display:table;
}

从display:table-cell css：

中删除.post_body

.post_body{
    width: 580px;
    opacity: 0.8;
}

检查此example是否适合您。

Answer 2

很久以前我试图解决这个问题而且我找不到任何css唯一的跨浏览器解决方案所以我最终使用javascript将长宽度空格插入到长单词中：

var breakableLongWord = '';
for( var i = 0; i < longWord.length; i += 10 ) {
    if( i ) breakableLongWord += String.fromCharCode( 8203 );
    breakableLongWord += longWord.substr( i, 10 );
}

正如我早就说过的那样，您可以通过更新的浏览器技术找到更好的解决方案。

Answer 3

正确的属性是word-wrap: break-word。

您可以使用normal属性指定break-word或word-wrap值。 normal表示文本将扩展框的边界。 break-word表示文本将换行到下一行。

IE 5.5 +，Firefox 3.5+以及Chrome和Safari等WebKit浏览器支持

word-wrap。

Answer 4

在JSFiddle这里jsfiddle.net/Le4zK，你的<p>向左浮动。首先，删除它。此外，.post_body的显示为table-cell。删除它。然后，您会看到word-wrap得到尊重，但<p>在580px时太大了。

尽可能避免使用table-cell布局，因为不需要特别需要的示例。

Answer 5

检查this解决方案。

问题是<p>标签长度。根据位置设置为相对的父级给出百分比宽度似乎可以解决问题。我还将内容包装在另一个div中。

诀窍是包含父div中的所有long元素，因为你正在改变显示属性并使用浮动，这将保持div内元素的内容流正常。

Answer 6

我会在您的父容器上使用overflow-x: hidden。

使用CSS打破单词

6 个答案: