Три метода расширенного применения CSS для достижения многострочного пропуска

CSS

Пожалуйста, не воспроизводите без разрешения

предисловие

Это старомодное требование, но все еще есть много людей, которые ищут решения в Интернете, особенно те, которые занимают высокие позиции в результатах поиска, которые представляют только использование, несовместимое с-webkit-line-clampстроить планы.

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

Три метода вводят несколько строк текста, усеченных здесь, конечно, первый - это то, что вы видите, рвота-webkit-line-clampЕсли вы не хотите его видеть, просто перейдите ко второму способу и начните его смотреть.

использовать-webkit-line-clamp

Примените следующие стили к контейнеру многострочного текста.

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

Кроме-webkit-line-clampДругие свойства фиксированы, в основном для отображения объекта в виде гибкой блочной модели и для установки расположения дочерних элементов гибкого блочного объекта.

а также-webkit-line-clampиспользуется для контроля того, сколько строк нужно пропустить

преимущество:

  • Поведение опущения изначально поддерживается браузером, стиль выглядит очень удобным
  • Простой и удобный в использовании

недостаток:

  • Вы можете увидеть, посмотрев на префикс атрибута, которыйwebkitПоддержка браузера ядра, совместимость не широкая.

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

Если вы ориентируетесь только на браузеры ядра webkit или мобильные терминалы (большинство мобильных браузеров являются ядрами webkit), то лучше всего использовать это решение.

Используйте абсолютное позиционирование

Эта схема на самом деле очень проста для понимания.Прежде всего, мы оставляем место с правой стороны контейнера для контента, чтобы ставить многоточия.padding-right: 1em;Чтобы зарезервировать место, почему это 1em? Многоточие почти 1em. Единица em используется для ответа на размер шрифта.

Используйте абсолютное позиционирование, чтобы расположить многоточие в правом нижнем углу этого зарезервированного пространства.

html

<div class="wrap">内容</div>

css

.wrap3 {
    position: relative;
    padding-right: 1em;
    /*max-height是line-height的几倍，想最多显示多少行就几倍*/
    max-height: 3.6em;
    line-height: 1.2em;
    text-align: justify;
    overflow: hidden;
}

.wrap3:before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

Эффект (для нескольких материалов):

В этом случае многоточие всегда будет там.Итак, чтобы решить эту проблему, мы закрываем многоточие квадратом того же цвета, что и фон, поэтому ключевым моментом является то, как вы узнаете, когда его закрывать, а когда нет?

Идея: блок, используемый для блокировки многоточия, также абсолютно позиционирован и установлен справа, какright: 0,ноbottomНе устанавливайте значение. Если вы его не установите, поле будет перемещаться с фактической высотой текстового содержимого, а неmax-heightвысота. В этом случае, когда нет необходимости опускать (т.е. не болееmax-height), бываетbottom: 0, он заблокирует многоточие. Когда должно быть сделано упущение (т.е. болееmax-height) не сможет остановить многоточие, и оно само заблокируетсяoverflow: hiddenСпрятан.

Итак, окончательное решение:

html

<div class="wrap">内容</div>

css

.wrap {
    position: relative;
    /*line-height和height要相互配合，显示多少行就省略，就是line-height多少倍数*/
    line-height: 1.2em;
    max-height: 3.6em;
    /*此属性看需求来判断是否设置，因为设置了padding-right，多腾出了点位置，该值一般为padding-right的值的负值*/
    /*margin-left: -1em;*/
    /*此值写死成1em就好，因为省略号大概就是占用1em的空间*/
    padding-right: 1em;
    text-align: justify;
    overflow: hidden;
}

.wrap:before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

.wrap:after {
    position: absolute;
    right: 0;
    /*宽高写死1em就好，因为省略号大概就是占用1em的空间，用来遮挡住省略号，也基本上跟wrap的padding-right一致*/
    width: 1em;
    /*与wrap的行高实际值保持一致*/
    height: 1.2em;
    content: '';
    /*要跟所在背景颜色一致才能遮挡住省略号后觉得没异样*/
    background-color: #fff;
}

Эффект:

демонстрационный адрес

преимущество

  1. Хорошая совместимость, поддерживается основными браузерами
  2. Адаптивная высота, нет необходимости писать мертвую высоту, установить, сколько строк не отображать
  3. адаптивная ширина
  4. Адаптивный размер шрифта, размер шрифта не повлияет на исходное требование, то есть столько строк, сколько необходимо опустить, только столько строк будет опущено.

недостаток

  1. В правой части текста намеренно оставлено место для многоточия.
  2. Вам нужно учитывать цвет фона, потому что псевдокласс after использует цвет фона для покрытия многоточия.

Использовать плавающий макет

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

Прежде чем говорить о плане, мы должны сначала понять такое явление:

Есть такой кусок html

<div class="wrap">
    <div class="left">左浮动</div>
    <div class="right1">右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1右浮动1</div>
    <div class="right2">右浮动2</div>
</div>

Применить такой стиль

.wrap {
	height: 100px;
}
.left {
	float: left;
	width: 60px;
	height: 100%;
	background: pink;
}
.right1 {
	float: right;
	/*占满wrap除left剩余宽度*/
	width: calc(100% - 60px);
	background: #95d9f8;
}
.right2 {
	float: right;
	background: yellow;
}

При нормальных обстоятельствах это будет отображаться так, что также является ожидаемой ситуацией, которую каждый может себе представить:

Условия возникновения этого нормального явления таковы:

  1. .right1высота не превышает.leftвысота (т.е. меньше контента)
  2. .right2ширина меньше чем.right1ширина

Что ж, все понимают эту ситуацию. Затем далее мы.right1содержимое выходит за пределы высоты левого плавающего элемента, происходит следующая сцена

Правый поплавок 2 застрял в левом нижнем углу.

Спросите меня, почему это происходит? Эх... Похоже, что ваши базовые знания по поплавку не солидны. Рекомендуется закрепить базовые знания. На самом деле я не могу это объяснить. Я знаю только, что это нормальная работа поплавка.

Условия возникновения этого явления следующие:

  1. .right1высота превышает.leftвысота (т.е. больше контента)
  2. .right2ширина меньше или равна.leftширина

Преобразование знаний в реализацию спроса

После понимания двух приведенных выше сценариев, как мы должны использовать эти знания, чтобы соответствовать соответствующим потребностям?

Предположим, что текстовое содержимое правого поплавка 1 — это содержимое, которое мы хотим опустить для нескольких строк, а содержимое правого поплавка 2 — это многоточие (...). Таким образом, когда содержимое маленькое, многоточие — это первый случай выше, а когда содержимое большое — второй случай.

Это динамическое изменение похоже на «не пропускать, когда текст маленький, и пропускать, когда текст длинный»? На этой основе необходимо решитьВ первом случае правый поплавок 2 скрыт, во втором случае правый поплавок 2 появляется в.wrapВ правом нижнем углу содержимое за пределами высоты скрыто.

Чтобы решить вышеуказанную проблему, просто используйтеposition: relative;Вы можете выполнить относительное позиционирование..wrapприложение родительского контейнераoverflow: hidden;. В первом случае, если он расположен за пределами родительского контейнера, он скрыт. Во втором случае он располагается в правом нижнем углу родительского контейнера.

Что ж, теперь основное внимание в решении уделяется тому, как точно его найти (следующий подраздел). Прежде чем решать проблему позиционирования, сначала преобразуйте текущую ситуацию в фактический код спроса:

<!--把左浮动和右浮动2采用伪类元素替换掉实际标签-->
<div class="wrap">
    <div class="text">右浮动1</div>
</div>

.wrap {
    height: 100px;
    /*line-height用来控制最多显示多少行文本*/
    line-height: 20px;
    overflow: hidden;
}
.wrap:before {
    float: left;
    /*要大于或等于after元素宽度*/
    width: 1.5em;
    height: 100%;
    content: '';
}
.text {
    float: right;
    /*用负值的marginLeft来避免由before产生的空白空间*/
    /*因为实际需求上你的父容器里不可能左边是一片空白吧*/
    margin-left: -1.5em;
    /*既然采用了负值marginLeft，那么文本容器宽度就可以100%占满父容器宽度了*/
    width: 100%;
}
.wrap:after {
    float: right;
    /*一般三个点就差不多1em宽，用em作单位能自适应字体大小*/
    width: 1em;
    content: '...';
}

Если вам сейчас интересно, почему.textвсе готовоwidth: 100%;Да, контент длинный:afterвсе еще застряли:beforeА дно? потому что даже если.textуже настроенmargin-left: -1.5em;, но на самом деле это не влияет на исходную ситуацию с документооборотом. Так и должно быть. Установка отрицательного поля влияет только на.textсобственный стиль изложения.

Как найти

Решение проблемы позиционирования основано на коде из предыдущего раздела. В настоящее время выявляются следующие проблемы:

  1. Когда содержимое небольшое и нет необходимости его пропускать, отображается многоточие.
  2. Когда есть много содержимого, которое необходимо опустить, многоточие скрыто

Сначала решить вторую задачу

Идея: сделать это:afterдвигаться вправо к.wrapВправо, поднимитесь к позиции последней строки.

использоватьposition: relative;контролировать,topхорошая цена, берите.wrapизline-heightФактическое значение такое же, просто возьмите отрицательное значение. Ключ - это левое значение, как заставить его просто показывать его в правом нижнем углу.

если ты точно знаешь.textШирина слова (например, 100px), по сути, устанавливаетсяleft: 100px;Этого достаточно, но в этом случае его можно использовать только для фиксированной ширины и нельзя адаптировать к ширине. Для достижения самоадаптации значение left можно взять в процентах, так что же такое процент? Это запутано. Просто возьмите 100%, и вы обнаружите, что он будет перемещен из родительского контейнера.

Если он должен появиться в правом нижнем углу, начальное положение многоточия должно быть в.wrapслева, рядом.wrap, способностьleft: 100%появляется в правом нижнем углу.

Теперь возникает вопрос, как сделать:afterтолько что появился в.wrapслева.Следующий код может быть немного сложным для понимания тем, у кого нет прочной основы (новая часть в комментариях):

.wrap:after {
    float: right;
    /*因为下面设置了margin，所以这里的宽度值大小没有要求*/
    width: 1em;
    content: '...';
    
    /*这两个属性是设置紧挨着.wrap左侧*/
    /*此值要跟自身宽度一样，取负值*/
    margin-left: -1em;
    /*此值要跟before宽度一样*/
    padding-right: 1.5em;
    
    /*这是定位省略号的位置*/
    position: relative;
    left: 100%;
    /*与父元素wrap的行高实际值一样，取负值*/
    top: -20px;
}

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

Во-первых, это приложениеmargin-left: -1em;когда, потому что:afterотношение ширины:beforeменьше, поэтому согласно оригинальной раскладке float, в одну строку

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

По изложенному принципу установитьmargin-left: -1em;назад,:afterОн возвращается к первой строке родительского контейнера, слева от родительского контейнера. Но мы не можем вернуть его на первую строку, поэтому ставимpadding-right: 1.5em;Заставьте его занимать так много места, чтобы первая строка не могла его удержать, и он вернется к исходной карточке.:beforeНижнее положение, только значение заполнения заставляет его двигаться влево

Хорошо, я закончил объяснять, если ты можешь это понять, ты можешь видеть только свою удачу, ха-ха.

Стоит отметить, что комментарий к ширине в приведенном выше коде гласит: «Поскольку поле установлено ниже, здесь нет требований к размеру значения ширины», и ранее требовалось, чтобы оно было меньше или равно:beforewidth, но теперь, поскольку отрицательное значение margin-left компенсирует его собственную ширину, это требование преобразуется вpadding-right, то он равен

резюме

На данный момент все проблемы решены. Для всех проблем, рассмотренных выше, приведен следующий код (конкретные оптимизации объясняются в комментариях):

css-стиль

.wrap {
    /*需要定高*/
    height: 100px;
    /*用来设置显示多少行才省略，值一般为wrap的height值/行数求得，但是这个行数会受到字体大小的限制*/
    /*字体太大了，设置显示很多行也会很丑，都挤一块了，所以这个实际值，要看具体需求和实践*/
    line-height: 25px;
    /*加上此属性显示效果更佳，就算部分浏览器不支持也影响不大*/
    text-align: justify;
    overflow: hidden;
}

.wrap:before {
    float: left;
    /*这个值可以随意设定，不论单位还是什么*/
    width: 1em;
    height: 100%;
    content: '';
}

.wrap:after {
    float: right;
    /*大小随意，设置em单位最好，可随字体大小变化而自适应*/
    /*如果要采用以下渐变效果，那么这个值要大于before里的width值效果会比较好点*/
	/*值越大，渐变的效果越明显影响的范围越大。*/
    width: 2.5em;
    /*与父元素wrap的行高实际px值一样*/
    height: 25px;
    /*此值要跟自身宽度一样，取负值*/
    margin-left: -2.5em;
    /*此值要跟before宽度一样*/
    padding-right: 1em;
    content: '...';
    text-align: right;
    /*这里开始利用在float布局的基础上进行定位移动了*/
    position: relative;
    /*与父元素wrap的行高实际值一样，取负值*/
    top: -25px;
    left: 100%;
    /*设置渐变效果是为了省略号和内容衔接得自然点，没那么突兀，要注意要跟文字所在的背景的颜色搭配（把white替换成背景色）*/
    background: #fff;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

.wrap .text {
    float: right;
    /*该值要等于wrap:before的width值*/
    margin-left: -1em;
    width: 100%;
}

HTML-файл:

<div class="wrap">
    <span class="text">
        示例2： 散发设解决看手机啦开发交
    </span>
</div>

Эффект:

демонстрационный адрес

преимущество

  1. Хорошая совместимость, может поддерживаться браузерами, не являющимися ядрами webkit.
  2. адаптивная ширина

недостаток

  1. Фиксированная высота, не может адаптироваться к высоте, поэтому количество отображаемых строк также ограничено размером шрифта.
  2. Нужно обернуть метку для текста, чтобы установить стиль
  3. С точки зрения чтения кода стиля понять не очень просто
  4. Если элемент, на котором находится многоточие, не использует градиентный фон, он иногда будет резко обрезаться.Если используется градиентный фон, обратите внимание на соответствие цвета фона, на котором расположен текст.

Суммировать

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

Пожалуйста, не воспроизводите без разрешения

Категории