Есть такая маленькая деталь в управлении файлами mac.
- Когда имя файла не превышает одной строки, оно отображается полностью, и при наведении на него мыши подсказка не появляется.
- Когда имя файла превышает одну строку, появится многоточие, и мышь будет отображаться для отображения полного имени файла.
тонкий, но оченьГуманизироватьПодробности (пс. видно полностью и подсказывать не надо 😘). На самом деле, такого эффекта можно легко добиться в Интернете с помощью простого CSS. Давайте посмотрим ниже~
1. Идеи реализации CSS
Я верю, что все знаютtitleЭтот атрибут используется в родной подсказке, можно сказать, что он поддерживается с древнего века, следующееMDNо введении этого свойства
title глобальные свойстваСодержит текст, представляющий рекомендательную информацию относительно элемента, которому он принадлежит. Эта информация обычно присутствует, но никогда не бывает необходимой, и отображается пользователю в виде подсказки.
Использование также очень просто
<p class="txt" title="这是absolute">元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
</p>
Стиль представления и время задержки заголовка здесь связаны с операционной системой и браузером и не могут быть изменены.
Теперь возникает вопрос,titleАтрибуты предварительно добавлены и не могут быть изменены для управления их отображением, поэтомуКак сделать динамическую обработку в CSS?
Хотя CSS не может быть динамически измененtitleатрибут, другой способ мышления, если есть два одинаковых текста, один из которых сtitleсвойства, такие как
<p class="wrap">
<span class="txt">元素会被移出正常文档流，并不为元素预留</span>
<span class="title" title="元素会被移出正常文档流，并不为元素预留">元素会被移出正常文档流，并不为元素预留</span>
</p>
Для удобства демонстрации здесьtitleТекст атрибута добавляется с фоновым цветом, а затем вызывается на данный моментТекст Аа такжеТекст Ббар (применяется следующее), как показано ниже
Теперь просто контролируйтеоднострочный текстпоказать, когдаТекст А,многострочный текстпоказать, когдаТекст Б, мы можем достичь желаемой функции.
Так,Как определить, что текст состоит более чем из одной строки??
Во-вторых, многострочное текстовое суждение
Во-первых, когда текст выходит за пределы строки,Высота обязательно изменится(😂), при условии, что высота строки равна 1,5, тогда 1 строка текста — 1,5 em, 2 строки — 3 em и так далее...
но,Если мы ограничим максимальную высоту текста A двумя строками, то одна строка и несколько строк не различаются (высота одной строки 1.5em, а высота нескольких строк 3em)
.txt{
display: block;
max-height: 3em;/*最大高度为2行*/
}
Теперь наступает решающий шаг,Переместить текст B вверх на 2 строки, здесь реализовано с относительным позиционированием (маржа тоже может быть)
.title{
position: relative;
top: -3em;
}
Это немного странно? На самом деле этоСдвинут вверх на 2 строки, так что вТекст АКогда есть только одна линия,Текст Бв самый раз"За границами"в; вТекст АКогда есть несколько строк,Текст Бтолько что"покрытие"В приведенном выше принцип показан следующим образом
В это время, если высота родителя ограничена одной строкой, аТекст Бсделать усечение одной строки
.wrap{
line-height: 1.5;
height: 1.5em;
}
.title{
position: relative;
top: -3em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
Таким образом, когда есть несколько линий, то, что видно в поле зрения,Текст Б, эффект следующий
Наконец, поместите родителя за пределы скрытого иТекст БПросто установите фон того же цвета, что и родитель.
Пока достигнут эффект, показанный в начале статьи, и полный код можно посмотретьcodepen auto title(Не забудьте поднять мышку о~)
Для более удобной и наглядной демонстрации подобный список составлен здесь следующим образом
Онлайн-примеры доступныcodepen auto title list(Не забудьте поднять мышку о~)
3. Другие практические случаи
Вот еще два полезных совета
1. Эффект среднего упущения
Внимательные друзья могли обнаружить, что когда текст в начале статьи выходит за пределы, многоточие оказывается всерединаиз.
Каковы преимущества этой конструкции? Например, иногда имена многих файлов совпадают, различаются только суффиксы имен или многие имеют номер версии, например:
Когда ширина меньше, в конце многоточие, что смущает,Так как спереди то же самое, с первого взгляда совершенно непонятно, какое имя файла следует за каким (😵)
Это легко отличить, если многоточие находится посередине. Итак, как добиться такого эффекта?
С приведенной выше схемой все следующие анализы должны толькоТекст БПросто сделай это. Что касается эффекта пропуска посередине, в настоящее время нет специального стиля CSS, который можно было бы реализовать, но его можно смоделировать, а затем посмотреть вниз.
Сначала сделайте копию текста, здесь мы используем::beforeПсевдоэлемент черезcontentгенерировать
.title::before{
content: attr(title);
}
Очевидно, в это время два абзаца текста соединяются вместе.
Затем дайте:beforeСместите вправо и установите ширину на 50%
.title::before{
content: attr(title);
width: 50%;
float: right;
}
Далее дайте:beforeУстановить за пределами усечения
.title::before{
/**/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Наконец, поставьте:beforeИзменить эффект предыдущего многоточия можно с помощьюdirectionреализация, оdirection, у вас может не быть много контакта с ним в обычных временах, но на самом деле, это необходимо изменить направление набора набора. По умолчанию слева направо, а эллипсис справа. Если это изменено справа налево, Эллипсос также будет слева, так
.title::before{
/**/
direction: rtl; /*从右到左*/
}
Теперь посмотрите готовый эффект
Также есть небольшая проблема, зазор слева от многоточия посередине иногда бывает немного большим, как показано ниже.
Это потому, что это место просто заворачивается, оставляя небольшую часть пространства. Здесь вы можете просто оптимизировать его, выровняв оба конца текста
.title{
/**/
text-align: justify;
}
Это гарантирует, что самый правый текст будет справа (конечно, текстовый зазор будет немного увеличен~), эффект будет следующим:
Онлайн-примеры доступныcodepen auto middle ellipsis(Не забудьте поднять мышку о~)
2. Помимо эффекта прокрутки
иногда,советы по заголовкуЭто может быть немного слабым и недостаточно очевидным.Когда продукт должен выйти за пределы текста, он может автоматически прокручиваться, когда на него помещается мышь, подобно этому эффекту.
Как этого добиться? На самом деле с помощью приведенной выше раскладки это очень легко реализовать здесь, нужно только подправитьТекст БПросто сделайте анимацию прокрутки, примерноCSS3 обеспечивает плавную прокрутку,Вот реализация:
Чтобы добиться бесшовной прокрутки от начала до конца, сначала нужно скопировать копию того же текста, что и здесь::afterПсевдоэлемент черезcontentгенерировать
.title::after{
content: attr(data-title);/*复制一份文本，下图绿色的部分*/
}
Теперь его нужно вывести в одну строку без переноса
.title{
/**/
white-space: nowrap;
}
Видно, что хотя разрыва строки нет, ширина по-прежнему равна ширине родителя и не следует за текстовым содержимым.В это время вы можете установитьdisplay: inline-block
.title{
/**/
display: inline-block;
white-space: nowrap;
}
Таким образом, ширина следует за текстовым содержимым~
Что касается ширины, чтобы следовать за текстовым содержимым, на самом деле вы также можете использоватьwidth: max-contentРеализация, чуть менее совместимая
.title{
/*
display: inline-block;
white-space: nowrap;
*/
width: max-content;
}
Наконец, установитеanimationАнимации достаточно, просто нужно бытьtransformперейти кПоловина себя 50%вернуться в положение быстро, вы можете достичьбесшовныйэффект, как показано ниже
.title:hover{
/**/
animation: move 10s .3s linear infinite;
}
@keyframes move {
to {
transform: translateX(-50%); /*位移到 50% 时 迅速归位*/
}
}
Промежуток в начале и конце здесь реализуется путем заполнения
.title::after{
content: attr(data-title);
padding: 0 5em;/*无缝滚动的首位间隙*/
}
Онлайн-примеры доступныcodepen auto scroll list(Не забудьте поднять мышку о~)
Единственный недостаток - фиксированное время анимации, если текст очень длинный, могут быть проблемы со слишком быстрой прокруткой
4. Резюме и объяснение
В этой статье представлена новая идея CSS, автоматически оценивающего многострочный текст, и приводятся 3 персонализированных небольших взаимодействия. В общем, я не использовал слишком много навыков (в основном воображение), и структура не сложная, думаю, что будет не очень сложно рассмотреть ее шаг за шагом.
Акцент остается на вышеизложенноммакетЧасть, макет отсутствует, и многие из следующих эффектов расширения легко решаются. Так как используется толькоCSS2Связанные функции (максимальная высота, усечение текста и т. д.), совместимость также отличная, и фактические измерения могут быть совместимы сIE7+ (полная совместимость, будьте уверены в использовании), следующие эффекты помимо прокрутки совместимы сIE10+, а теперь резюмируем моменты реализации:
- Переключение идей, репликация узла — хороший способ
- пройти черезmax-heightМожет судить об одной линии и нескольких линиях
- Гибкое использованиеCSS повязка на глазаПереопределение иерархии и скрытие за ее пределами
- направление: rtlМожно добиться эффекта опережающего многоточия
- Среднее многоточие можно использовать с двумя абзацами текста.соединениеспособ моделирования
- Может использоваться адаптация ширины к текстуinline-blockвыполнить
- Эффект бесшовной прокрутки можно использовать со смещением-50%реализовать
Что ж, такая недорогая и очень удобная маленькая функция, поторопитесь и воспользуйтесь ею. Если вы считаете, что это хорошо, ставьте лайк, добавляйте в избранное и вперед ❤❤❤~