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

Ответ 1

Вы можете использовать wrapper div и multi-column 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. Если у вас есть идеи, напишите в комментариях.

Ответ 2

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

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

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

Ответ 3

Это решение сработало для меня: fooobar.com/questions/178971/... По существу создайте обертку div с соответствующим дополнением и поместите содержимое в главный div, где вы отредактируете его высоту и скройте переполнение. См. Ссылку для получения более подробной информации.

Ответ 4

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

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

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

Ответ 5

Rob является правильным. Я делал div, у которого была максимальная высота 11 м, и последняя строка текста переполнения была только наполовину. white-space: nowrap просто исключает эту последнюю строку.

Я пробовал

white-space: nowrap;

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

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

Ответ 6

просто добавьте атрибут ширины столбца и задайте ширину контейнера, он будет работать.

Ответ 7

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

Ответ 8

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

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

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