Flexbox и обрезание текста


Содержание материала:

обрезать переполнение текста с помощью flex

У меня есть следующий код, и я хочу обрезать текст в некоторых элементах с многоточием

Я хочу обрезать.chip-input-chip и.chip-input-autocomplete-option, но вместо того, чтобы усекать его, переполняется.

Если я пишу overflow-x: hidden на чипе-вводе, он создает вертикальный свиток.

как я могу предотвратить переполнение и усечение текста?

Обновление: изображение с overflow-x: hidden на контейнере (чип-ввод), как вы можете видеть, текст усекается с помощью многоточия, но overflow-x: hidden также добавляется вертикальная полоса прокрутки.

Flexbox и обрезание текста

Если кто не в знает, что добавление и переполнения многоточия к текстовому элементу не является эффективным содержанием. Однако все же имеет смысл использовать эту технику для некоторых элементов пользовательского интерфейса. Независимо от того, разумно ли применять эту технику к вашему контенту, это зависит от вас. Самый простой и более пуленепробиваемый способ обработки много строчного усечения строк, поэтому я обнаружил, что мы можем обрезать строку, используя два тщательно размещенных псевдо-элемента CSS.

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

Если вы заметили, последний эффект отлично подходит для добавления многоточия в отдельные строки текста, но текст не будет разбиваться на несколько строк из-за строки. Это заставляет текст оставаться на одной линии независимо от того, как долго это происходит. Чтобы исправить это и показать несколько строк текста перед добавлением многоточия, мы должны использовать следующий класс.

Приступаем к установке:

Здесь будет находится знаки или большая статья

.text-rings-responsively <
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 2.5em;
text-align: justify !important;
padding-right: 39px;
padding-left: 1em;
>

.text-rings-responsively:before <
content: »;
position: absolute;
right: 19px;
bottom: 0;
>

.text-rings-responsively:after <
content: »;
position: absolute;
right: 19px;
width: 2em;
height: 2em;
margin-top: 0.3em;
background: white;
>

Как это работает:

Представим себе, что нам нужно содержать блок текста до максимум 3 строк. Чтобы сделать это, мы должны обрабатывать следующие случаи:

1. Текст более 3 строк;

2. Текст меньше 3 строк;

3. Текст ровно 3 строки;

1. Чистый CSS;
2. Отзывчивый;
3. Нет необходимости пересчитывать при изменении размера или события загрузки шрифта;
4. Кросс-браузер;

Также не забываем, что при установки, что то может быть не корректно, а это показатся нижнее строка, все насттраевается в CSS, где сами можете выстроить конфигурацию, как кам нужно, или чтоб удобно было. Но и не забываем про многоточие, что с стилях отвечает content: »; — как видим сейчас в нем все точни убраны, что можно установить, если хотите, чтоб они были, а также можно одну прописать, так как срез идет на пробеле, что возможно будет по теме точка выставлена.

Заметка: Для эффекта эллипса требуется webkit, а это означает, если кто-то просмотрит его с помощью браузера, который не поддерживает webkit, тогда они не будут видеть многоточие «. » но текст по-прежнему будет отрезан в правильной точке, поэтому этот эффект по-прежнему будет работать во всех основных браузерах.

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

Троеточие в конце строки средствами CSS

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

Для этого нам на помощь придет наш любимый CSS. Все очень просто, смотрите.

Допустим, у нас есть вот такой блок из каталога с товарами:

Замечательный товар по супер-цене, всего за 100 руб. Скрасит ваши одинокие вечера и даст прилив жизненных сил!

Вот его структура:

Согласитесь, выглядит ужасно. Конечно, можно сократить название товара. Но что делать, если таких сотни или тысячи? Можно также средствами php обрезать часть названия, ограничившись каким-то количеством символов. Но что делать, если потом поменяется верстка и блоки будут меньше или наоборот раза в 2-3 больше? Все это не вариант, все это нам не подходит.

И тут нам на помощь приходит CSS и его волшеблое свойство text-overflow. Но его нужно правильно использовать совместно с несколькими другими свойствами. Ниже я покажу вам готовое решение, после чего объясню что к чему.

Итак, отодвинув в сторону ручное редактирование названий товаров и программную обрезку стилей, мы берем в руки CSS и смотрим, что у нас получится:

Замечательный товар по супер-цене, всего за 100 руб. Скрасит ваши одинокие вечера и даст прилив жизненных сил!

Ну как, лучше? По-моему очень даже! А поднесите мышку к названию. вуаля! Вот оно нам показывается полностью.

В структуре у нас ничего не поменялось, я лишь добавил диву с классом .header тег title. А вот новые, дополненные стили:

Смотрите, что мы сделали:

  • Мы добавили блоку свойство white-space: nowrap, которое убирает у текста возможность переноса слов на новую строку, тем самым вытягивая его в линию;
  • Затем мы добавили свойство overflow: hidden, которое ограничило видимость нашей строки шириной блока, тем самым обрезая все лишнее и не показывая его посетителю;
  • Ну и в конце мы добавили троеточие к нашей строке посредствам свойства text-overflow: ellipsis, тем самым давая посетителю понять, что это не конец строки, и что нужно, наверное, поднести мыщку и посмотреть ее полностью.

Любите CSS, изучайте CSS, и сайтостроительство не покажется вам такой уж сложной вещью =)

CSS Flex-бокс — Обрезка ящик, содержащий длинный текст

Я играю с системой Flexbox в CSS, и я не могу понять, как решить мою проблему.

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

Это то, что я сейчас:

И это то, что я хочу иметь:

Я искал готовое решение в гугле (и StackOverflow) , но без удачи. Я подготовил также JSFiddle для этого: http://jsfiddle.net/f98VN/4/

Можно ли делать то, что я хочу, и если да, то как я могу добиться этого? Если нет, то каковы ваши предложения?

HTML

CSS

Вы можете сжать средний контейнер для самого длинного слова с помощью: display:table;width:1%; DEMO или использование inline-block и inline-table , сбросив flexmodel: DEMO (это он)

Для того, чтобы держать слова вместе вы можете использовать не разрывной характер между словами , которые вы хотите , чтобы держаться в стороне на одной линии: DEMO

Edit: Над демок работает в некоторых браузерах. В Chrome и Opera контент перемещается в сторону страницы. Стационарное исполнение: http://codepen.io/gc-nomade/pen/izKFG

Ну, дополнительное пространство появляется потому, что пробельный разрыв является подделкой эффекта применяется в браузере. Что на самом деле происходит, и он скрыт в браузере, что слово разрывается между своими письмами, то экстра-пространство является на самом деле пространство, что письма действительно взять.

Вы можете увидеть его, установив текст DIV в word-break: break-all; http://jsfiddle.net/f98VN/10/

Это не эффект, который вы просили, но, по крайней мере, он не оставляет дополнительное пространство.

Я получил его появляться так, как вы хотите, используя проценты не фиксированной ширины пикселя,

CSS text-overflow Property

Example

Use of the text-overflow property:

More «Try it Yourself» examples below.

Definition and Usage

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (. ), or display a custom string.

Both of the following properties are required for text-overflow:

  • white-space: nowrap;
  • overflow: h >
    Default value: clip
    Inherited: no
    Animatable: no. Read about animatable
    Version: CSS3
    JavaScript syntax: object.style.textOverflow=»ellipsis» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -o- specify the first version that worked with a prefix.

Property
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-

CSS Syntax

Property Values

Value Description Play it
clip Default value. The text is clipped and not accessible Play it »
ellipsis Render an ellipsis («. «) to represent the clipped text Play it »
string Render the given string to represent the clipped text
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Text-overflow with a hover effect (show entire text on hover):

div.a <
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
>

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Вся документация по свойству flex находится на официальном сайте.

Для быстрого изучения темы рекомендуем пройти 7-ми дневный марафон Flexbox CSS

display

inline-flex
русский
english

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Применяется ко: всем элементам.

flex Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели. inline-flex Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

Applies to: all elements.

flex This value causes an element to generate a block-level flex container box. inline-flex This value causes an element to generate an inline-level flex container box.

flex-direction

row-reverse
column
column-reverse


русский
english

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Применяется к: flex контейнерам.

row Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево. row-reverse Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо. column Главная ось располагается вертикально и направлена сверху вниз. column-reverse Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

Applies to: flex containers.

row The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode. row-reverse Same as row, except the main-start and main-end directions are swapped. column The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode. column-reverse Same as column, except the main-start and main-end directions are swapped.

flex-wrap

nowrap
wrap-reverse
русский
english

Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Применяется к: flex контейнерам.

Значение по умолчанию: nowrap.

nowrap Флексы выстраиваются в одну линию. wrap Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. wrap-reverse Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

Applies to: flex containers.

Initial: nowrap.

nowrap The flex container is single-line. wrap The flex container is multi-line. wrap-reverse Same as wrap.

flex-flow

row nowrap
column-reverse
column wrap
row-reverse wrap-reverse
русский
english

Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Применяется к: flex контейнерам.

Значение по умолчанию: row nowrap.

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

Applies to: flex containers.

Initial: row nowrap.

order

русский
english

Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

Применяется к: flex элементам.

Значение по умолчанию: 0.

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single value, which specifies which ordinal group the flex item belongs to.

A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

Applies to: flex items.

Initial: 0.

justify-content

flex-start
flex-end
center
space-between
space-around
space-evenly
русский
english

Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

Применяется к: flex контейнерам.

Значение по умолчанию: flex-start.

flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Applies to: flex containers.

Initial: flex-start.

flex-start Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. flex-end Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. center Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) space-between Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. space-around Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. space-evenly Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

align-items

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

Применяется к: flex контейнерам.

Значение по умолчанию: stretch.

flex-start Флексы выравниваются в начале поперечной оси контейнера. flex-end Флексы выравниваются в конце поперечной оси контейнера. center Флексы выравниваются по линии поперечной оси. baseline Флексы выравниваются по их базовой линии. Stretch Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex containers.

Initial: stretch.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

align-self

flex-start
flex-end
center
baseline
stretch
русский
english

Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

Применяется кo: flex элементам.

Значение по умолчанию: auto.


flex-start Элемент выравнивается в начале поперечной оси контейнера. flex-end Элемент выравнивается в конце поперечной оси контейнера. center Элемент выравнивается по центральной линии на поперечной оси. baseline Элемент выравнивается по базовой линии текста. Stretch Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex items.

Initial: auto.

flex-start The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. flex-end The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. center The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) baseline If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. Stretch If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

align-content

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch
русский
english

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

flex-start Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. flex-end Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. center Строки располагаются по центру контейнера. space-between Строки равномерно распределяются в контейнере и расстояние между ними одинаково. space-around Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. space-evenly Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк. stretch Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

flex-start Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. flex-end Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. center Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) space-between Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same. space-around Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines. space-evenly Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same. stretch Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

Обрезать текст по высоте.

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Похожие публикации

Столкнулся с проблемой: text-overflow: ellipsis добавляет многоточие только если в блок не влазит строка по ширине.
Если же есть возможность переноса и строка не вмещается по высоте, многоточие не добавляется.
Сталкивался ли кто-нибудь с этой проблемой? Подскажите, пожалуйста, решение.

Статистика пользователей

Сейчас на странице 0 пользователей

Нет пользователей, просматривающих эту страницу.

Flexbox и обрезание текста

Зачастую обрезание текста надо при выводе списка записей, и вывода их краткого содержимая. Таким образом добиваемся ровности и перфекционизма в блоках, например в виджите вывода новостей на главной.

обрезания текста по высоте css

Решение на CSS для однострочного текста

Для однострочного текста есть красивое и простое решение на CSS. В этом случае можно использовать свойство text-overflow: ellipsis . При этом контейнер должен иметь свойство overflow равное hidden или clip. Пример:

Решения на CSS для многострочного текста

Один из способов обрезки многострочного текста на CSS использует псевдо-элементы :before и :after.

Краткое описание новости

Другое решение на CSS использует свойство column-w >. Оно задает ширину колонки для многостраничного текста. Вы уже, наверное, догадались, как мы будем его использовать? Правильно, мы зададим ширину колонки, равную ширине блока, а текст, который не помещается в блок, будет во второй, скрытой колонке:

Многоточие при таком способе не добавится, но текст не будет резаться посередине строки.

Интересное решение для многострочного текста на CSS есть для браузеров Webkit. Для этого нужно использовать сразу несколько специфичных свойств с префиксом -webkit:

Свойство -webkit-line-clamp ограничивает количество строк, выводимых в блоке. Работает красиво и элегантно, но из-за своей специфичности в реальном проекте, конечно, такой прием не может использоваться.

Решения на JavaScript

В решении на JavaScript используется еще один невидимый блок, в который мы помещаем нужный текст, потом удаляем по одному символу, пока высота этого блока не станет меньше либо равной высоте нужного блока. И в конце текст помещаем обратно в исходный блок.

Этот же способ можно оформить в виде простенького плагина для jQuery:

Теперь вызов функции обрезки текста сведется к вызову метода truncateText:

Что касается решений на JavaScript, нужно помнить, что операции с DOM’ом: вставка элемента, удаление, изменение его содержимого — являются очень тяжелыми. Поэтому с такими хаками нельзя усердствовать.

Заключение

Мы привели несколько решений для обрезания произвольного текста как на CSS, так и на JavaScript. Если поддержка браузеров позволяет, лучше выбрать решение на CSS — оно будет быстрее, стабильнее, меньше. Если нет — можно использовать JavaScript, но важно помнить о производительности и применять функцию обрезки текста только действительно в нужных местах.

Как обрезать элемент на CSS (свойства overflow, text-overflow и clip)

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

CSS свойство overflow

Для предотвращения переполнения у блочных элементов применяется свойство overflow (overflow-x управляет горизонтальной прокруткой, overflow-y — вертикальной). Оно бесполезно для таких HTML элементов как textarea и input.

overflow и position: absolute;

Элемент с position: absolute; перемещается в рамках другого элемента с position, отличного от static. То есть родитель с overflow: h > ▼ hidden r a r s a r s f

Полоса прокрутки (scrollbar) и position: fixed;

Полоса прокрутки, принадлежащая тегу html, не перекрывается элементом с position: fixed. Это является проблемой для модального окна, распахнутом на весь экран. Решение просто как две копейки: нужно убрать прокрутку у html и добавить при необходимости прокрутку у body.

CSS свойство text-overflow: закончить многоточием

При overflow не в значении visible текст становится не читаемым, обрезаясь на полуслове. Особенно, если его перенос на другую строку запрещён благодаря white-space в значении nowrap. В этом случае можно обозначить, что часть слов убрана и повествование не закончено, воспользовавшись свойством text-overflow.

CSS свойство clip

Только для элементов, которым задан position: absolute;. Единицы измерения можно выбрать px, em и т.п., но не проценты.

6 комментариев:

ololo Отлично! таких примеров нигде еще не встречал. не нужно в блокнот для каждого свойства лесть! NMitra Я к этому варианту пришла через тернистый путь проб и ошибок. Сама без «Шпаргалки» уже не могу — это мой блокнот. ))) Правда всё ещё она не в том состоянии, в котором я её вижу в конечном итоге. Дмитрий Емцов А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй. NMitra Пока это невозможно. Что-то подобное я видела в «черновиках», но на практике нет поддержки браузерами. Евгений Гринец А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй.

some_class:
| First line,
| second line
| and more

.soome_class <
font-size: 1em;
height: 2em;
overflow: hidden;
>
NMitra Установите height, равную высоте двух строк. height двух строк = line-height * 2

Flexbox и обрезание текста

Если кто не в знает, что добавление и переполнения многоточия к текстовому элементу не является эффективным содержанием. Однако все же имеет смысл использовать эту технику для некоторых элементов пользовательского интерфейса. Независимо от того, разумно ли применять эту технику к вашему контенту, это зависит от вас. Самый простой и более пуленепробиваемый способ обработки много строчного усечения строк, поэтому я обнаружил, что мы можем обрезать строку, используя два тщательно размещенных псевдо-элемента CSS.

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

Если вы заметили, последний эффект отлично подходит для добавления многоточия в отдельные строки текста, но текст не будет разбиваться на несколько строк из-за строки. Это заставляет текст оставаться на одной линии независимо от того, как долго это происходит. Чтобы исправить это и показать несколько строк текста перед добавлением многоточия, мы должны использовать следующий класс.

Приступаем к установке:

Здесь будет находится знаки или большая статья

.text-rings-responsively <
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 2.5em;
text-align: justify !important;
padding-right: 39px;
padding-left: 1em;
>

.text-rings-responsively:before <
content: »;
position: absolute;
right: 19px;
bottom: 0;
>

.text-rings-responsively:after <
content: »;
position: absolute;
right: 19px;
width: 2em;
height: 2em;
margin-top: 0.3em;
background: white;
>

Как это работает:

Представим себе, что нам нужно содержать блок текста до максимум 3 строк. Чтобы сделать это, мы должны обрабатывать следующие случаи:

1. Текст более 3 строк;

2. Текст меньше 3 строк;

3. Текст ровно 3 строки;

1. Чистый CSS;
2. Отзывчивый;
3. Нет необходимости пересчитывать при изменении размера или события загрузки шрифта;
4. Кросс-браузер;

Также не забываем, что при установки, что то может быть не корректно, а это показатся нижнее строка, все насттраевается в CSS, где сами можете выстроить конфигурацию, как кам нужно, или чтоб удобно было. Но и не забываем про многоточие, что с стилях отвечает content: »; — как видим сейчас в нем все точни убраны, что можно установить, если хотите, чтоб они были, а также можно одну прописать, так как срез идет на пробеле, что возможно будет по теме точка выставлена.

Заметка: Для эффекта эллипса требуется webkit, а это означает, если кто-то просмотрит его с помощью браузера, который не поддерживает webkit, тогда они не будут видеть многоточие «. » но текст по-прежнему будет отрезан в правильной точке, поэтому этот эффект по-прежнему будет работать во всех основных браузерах.

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

Топ-пост этого месяца:  Как проверить что в посту есть тег iframe
Добавить комментарий