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

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


css overflow hidden
person Get the Jaws of Life    schedule 10.07.2010    source источник
comment
привести пример? возможно, испортите высоту строки в последнем элементе.   -  person meder omuraliev    schedule 11.07.2010
comment
Он имеет в виду, что содержимое обрезается посередине, поэтому отображается верхняя половина символов, но не нижняя. AFAIK, для этого нет решения, кроме как прикрутить высоту строки (что в любом случае не будет кросс-браузерным решением)   -  person Rob    schedule 11.07.2010
comment
почему вы используете переполнение? содержать поплавки? или вам действительно нужно скрыть переполнение?   -  person meder omuraliev    schedule 11.07.2010

Ответы (8)


arrow_upward
13
arrow_downward

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

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

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

Обновление от 21 сентября 2017 г.

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

Обновление от 25 марта 2019 г.

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

http://jsfiddle.net/ncmo9yge/

person stalkerg    schedule 13.02.2014
comment
Работает на меня. :) Однако я не могу заставить его работать с text-overflow:ellipsis. Это возможно? - person Cees Timmerman; 21.01.2015
comment
В этом методе нет переполнения. Поэтому text-overflow: ellipsis работать не будет. CSS-регионы могут помочь, но: caniuse.com/#feat=css-regions :( - person stalkerg; 22.01.2015
comment
@Swen это все еще работает для Firefox, посмотрите обновление. - person stalkerg; 21.09.2017
comment
Это действительно крутой ход, спасибо, что поделились! - person Hank; 22.11.2017

arrow_upward
10
arrow_downward

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

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

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

arrow_upward
2
arrow_downward

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

person seon    schedule 01.07.2013

arrow_upward
1
arrow_downward

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

Я пытался

white-space: nowrap;

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

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

person Get the Jaws of Life    schedule 10.07.2010
comment
это работает только потому, что ваша последняя строка была создана путем переноса длинной строки. Если бы в нем был ‹br /›, он все равно частично отображался бы.. Вам нужно убедиться, что height div можно точно разделить на его line-height .. - person Gabriele Petrioli; 11.07.2010
comment
Имеет смысл. Я сделал высоту div примерно 11em. Будет ли это иметь значение? - person Get the Jaws of Life; 11.07.2010

arrow_upward
1
arrow_downward

это сработало для меня:

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

.wrapper{
    -webkit-column-width: 300px;
    column-width: 300px;
    height: 100%;
}
person Klaudia Brysiewicz    schedule 23.02.2018
comment
Спасибо, это сработало для меня. Дело в том, что моя ширина для wrapper_container составляет 50%, то есть варьируется. Итак, в .wrapper я изменил -webkit-column-width: и column-width: на 500px, что больше, чем когда-либо будет ширина контейнера .wrapper. Что ж, это сработало, но я немного удивлен. Как вы думаете, безопасно ли это делать? - person flobacca; 30.11.2018
comment
На самом деле, моя ширина варьируется от 220px до 390px. Поэтому я установил ширину столбца: 219 пикселей. Он будет в одном столбце, когда ширина внешнего контейнера наименьшая, и будет в одном столбце, когда ширина внешнего контейнера наибольшая. Я чувствую себя лучше по этому поводу, так как я не думаю, что текст будет обрезан. Если у вас есть время, я хотел бы услышать ваше мнение. - person flobacca; 30.11.2018

arrow_upward
-1
arrow_downward

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

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

.class-name {word-break: break-all;}
.class-name {word-wrap: break-word;}
person Ahmad Sharif    schedule 02.08.2014

arrow_upward
-1
arrow_downward

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

person Nauman Sharif    schedule 25.05.2016

arrow_upward
-1
arrow_downward

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

person gouraw    schedule 29.01.2019
comment
Не могли бы вы объяснить, как вы должны использовать границу вместо заполнения, желательно на примере? - person Smar; 18.10.2019