CSS word-wrap работает не так, как ожидалось

Почему свойство word wrap корректно работает в приведенном ниже примере?

Что я могу сделать, чтобы часть слова "consectetur" соответствовала самой первой строке? Я хочу, чтобы максимальное количество символов соответствовало каждой строке.

Значение css:

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-wrap:break-word;
    border:2px solid; }

Ответ 1

Используйте word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
word-break: break-all;
    border:2px solid; }

LIVE DEMO

Ответ 2

Если word-wrap: break-all не работает, попробуйте также добавить это:

white-space:normal;

работает для меня с классом .btn в Bootstrap 3

Ответ 3

Он не обертывается должным образом, потому что браузеры не применяют автоматическую перенос (по которой можно было бы привести к правильной упаковке) по умолчанию. Вам нужно использовать перенос переносов на основе CSS или перенос на основе JavaScipt. Параметр word-wrap:break-word, а также word-break: break-all, по определению разрывает слова (разбивает их на кусочки s в аррелярном poin ts) вместо правильной упаковки.

Ответ 4

Это полезно для обертывания текста в одной строке:

#fos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

Ответ 5

Поскольку css word-wrap не работает во всех браузерах, используйте JavaScript вместо этого! Он должен дать тот же результат.

Для функции ниже требуется JQuery, и она будет запускаться при каждом изменении размера окна.

Функция проверяет, имеет ли элемент больше ширины, чем ее родительский элемент, и если он имеет, он разбивает все, а не только слова. Мы не хотим, чтобы дети росли больше, чем родители, верно?

Мне нужно только это для таблиц, поэтому, если вы хотите его в каком-то другом элементе, просто измените "table" на "#yourId" или ".yourClass". Удостоверьтесь, что есть родительский-div или изменить "div" на "body" или что-то еще?

Если он перейдет к другому, он изменит слово-break, а затем проверяет, нужно ли ему возвращаться назад, поэтому есть так много кода..: '/

$(window).on('resize',function() {
    $('table').each(function(){
        if($(this).width() > $(this).parent('div').width()){
            $(this).css('word-break', 'break-all');
        }
        else{
            $(this).css('word-break', 'break-word');
            if($(this).width() > $(this).parent('div').width()){
                $(this).css('word-break', 'break-all');
            }
        }
     });
}).trigger('resize');

Я надеюсь, что это сработает для вас!