CSS: Можете ли вы предотвратить переполнение: скрытый от обрезания последней строки текста?

Question

При использовании CSS overflow: hidden я часто обнаруживал, что последняя строка текста частично обрезается. Есть ли способ предотвратить это, чтобы какие-то частичные строки не появлялись. Почти как вертикальная переноска слов.

Answer 1

Вы можете использовать упаковщик div и несколько столбцов css:

.wrapper {
    -webkit-column-width: 150px; //You can't use 100%
    column-width: 150px;
    height: 100%;
}

Пример решения: http://jsfiddle.net/4Fpq2/9/

Обновление 2017-09-21

В Firefox это решение все еще работает, но не работает в Chrome. Недавно Chrome начал разбивать столбец на маленькие части, а также останавливать содержимое разрыва, если вы установили высоту. В этом примере http://jsfiddle.net/4Fpq2/446/ я изменяю высоту на максимальную высоту и показываю странное поведение Chrome. Если у вас есть идеи, пишите в комментариях.

Обновление 2019-03-25

В принципе, это работает даже для Chrome, но у вас должно быть как минимум две строки. Для блока с некоторым количеством видимого текста этот подход все еще должен работать нормально.

http://jsfiddle.net/ncmo9yge/

Answer 2

Как только вы поймете, как работает column-width, ответ @ stalkerg имеет большой смысл.

ширина столбца разбивает содержимое по столбцам, поэтому последняя строка текста не помещается, она будет перемещена в следующий столбец. Теперь хитрость заключается в том, чтобы сделать ширину столбца равной ширине контейнера. Контейнер переполнен: скрыт, поэтому 2-й столбец не будет показывать.

.box {
    width: 200px;
}
.container {
    -webkit-column-width: 200vw;
    -moz-column-width:    200vw;
    column-width:         200vw;
    height:               100%;
}

Answer 3

Это решение сработало для меня: https://stackoverflow.com/a/17413577/2540428 По сути создайте div-обертку с соответствующим отступом и поместите содержимое в основной div, где вы редактируете его высоту и скрываете переполнение.Смотрите ссылку для более подробной информации.

Answer 4

, который работал для меня:

.wrapper_container{
    width: 300px;
    height: 200px;
    overflow: hidden;
}

.wrapper{
    -webkit-column-width: 300px;
    column-width: 300px;
    height: 100%;
}

Answer 5

просто используйте границу вместо заполнения.

Answer 6

просто добавьте атрибут column-width и установите ширину контейнера, это будет работать.

Answer 7

Существует два свойства css3. 1) разрыв слов и 2) перевод слов

Не забудьте, что это новое свойство css3. Так что старые браузеры не поддерживают такое свойство.

.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}

Answer 8

Роб правильно. Я делал div с максимальной высотой 11em, а последняя строка текста переполнения была только наполовину. пробел: nowrap просто удаляет эту последнюю строку все вместе.

Я пытался

white-space: nowrap;

и Габи также правильно, что это также вызывает проблемы.

Лучшее, что я придумал, это возиться с высотой строки и высотой div, пока не будет обрезано наименьшее количество строк