html - 使用 CSS 分词

Question

标签中的文字<p>太长时会出现这样的情况，如何用CSS防止这种情况？我已经尝试过 CSS 属性word-break: break-all;，但 Firefox 和 Opera 不支持此属性，除此之外，其他“正常”字词也会中断。所以我只想打破很长的单词，而不是短的单词，这取决于 white 的宽度<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/

score 20 · Accepted Answer

写这个word-wrap: break-word;而不是word-break: break-all;

编辑：

也许这是一个display:table属性错误。我在 css 中做了一些更改：放入display:tablediv parent。

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

display:table-cell从.post_bodyCSS中删除：

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

检查此示例是否适合您。

score 4 · Accepted Answer

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

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

正如我在很久以前所说的那样，您也许可以使用更新的浏览器技术找到更好的解决方案。

score 2 · Accepted Answer

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

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

word-wrap在 IE 5.5+、Firefox 3.5+ 和 WebKit 浏览器（如 Chrome 和 Safari）中受支持。

score 0 · Accepted Answer

在此处的 JSFiddle jsfiddle.net/Le4zK 中，您<p>的左侧浮动。对于初学者，删除它。此外，.post_body有一个显示table-cell。删除这个。然后你会看到它word-wrap受到尊重，但你<p>在 580px 时太大了。

尽量避免使用table-cell布局，因为从示例中给出的不是特别需要。

score 0 · Accepted Answer

检查此解决方案。

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

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

score -1 · Accepted Answer

-1

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

于 2011-09-10T09:40:30.660 回答

html - 使用 CSS 分词

6 回答 6

Related

Reference