Нарушение слов с помощью 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: 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>

Ответы

Ответ 1

Запишите это word-wrap: break-word; вместо word-break: break-all;

EDIT:

Возможно, это ошибка с свойством 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 из .post_body css:

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

Проверьте, работает ли этот .

Ответ 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 );
}

Как я уже говорил, это было давно, поэтому вы могли бы найти лучшее решение с более новыми технологиями браузера.

Ответ 3

Правильное свойство word-wrap: break-word.

Вы можете указать значение normal или break-word с помощью свойства word-wrap. normal означает, что текст расширит границы окна. break-word означает, что текст будет перенесен в следующую строку.

word-wrap поддерживается в браузерах IE 5.5+, Firefox 3.5+ и WebKit, таких как Chrome и Safari.

Ответ 4

В JSFiddle здесь jsfiddle.net/Le4zK, ваш <p> плавает влево. Для начала удалите это. Кроме того, .post_body имеет отображение table-cell. Удали это. Затем вы увидите, что word-wrap соблюдается, но ваш <p> слишком велик при 580px.

Попробуйте и не используйте макеты table-cell, где это возможно, так как из приведенного примера это не особенно необходимо.

Ответ 5

Отметьте это решение.

Проблема заключалась в длине тега <p>. Дать ему процентную ширину, основанную на родительском, с позицией, установленной на относительную, по-видимому, устраняет проблему. Я также обернул содержимое в другой div.

Трюк состоит в том, чтобы содержать весь длинный элемент внутри родительского div, поскольку вы изменяете свойства отображения и используете float, это будет поддерживать нормальный поток содержимого для элементов внутри div.

Ответ 6

Я бы использовал overflow-x: hidden в родительском контейнере.