В ежедневных макетах наверняка часто встречается, что текстовое содержимое превышает контейнер. Очень распространенное решение невозможно исключить.
Однако иногда из-за ограничений сцены могут быть некоторые сцены, в которых нельзя использовать метод за пределами пропуска точки, например, на панели навигации:
В этом случае, когда контейнер имеет фиксированную ширину, но текст переполняется и не может переноситься, нам нужно найти другое решение.
Всплывающая подсказка при наведении
Возможным решением является всплывающее текстовое поле для отображения полного текста при наведении курсора.Самый простой способ — добавить атрибут title под текстовой меткой, чтобы заполнить нужный нам контент:
<nav>
<p title="溢出文本1 溢出文本2 溢出文本3 溢出文本4">溢出文本1 溢出文本2 溢出文本3 溢出文本4</p>
</nav>
Конечно, этот метод прост, но ему может не хватать пользовательского опыта.
В этой статье будет кратко представлено, что когда длина текста неопределенна, а длина контейнера также неопределенна, когда текст любой длины находится в состоянии наведения, прокрутка слева направо, прокрутка до конца текста, а затем прокрутите назад до исходной позиции и так далее, например:
Фиксированная ширина контейнера, переменная ширина текста
Давайте сначала предположим, что ширина нашего контейнера фиксирована, но мы не уверены в ширине каждого текста.
Так:
<div class="wrap">
<p title="我的宽度是正常宽度">我的宽度是正常宽度</p>
<p class="scroll" title="我的宽度是溢出了一小部分">我的宽度是溢出了一小部分</p>
<p class="scroll" title="我的宽度是溢出了溢出了很大一部分">我的宽度是溢出了溢出了很大一部分</p>
</div>
.wrap {
position: relative;
width: 150px;
overflow: hidden;
}
p {
white-space: nowrap;
}
использоватьinline-blockПолучить ширину фактического текста
из-за<p>Ширина метки составляет 100% от родительского элемента, если это так, нам сложно сделать следующее. Сначала нам нужно получить ширину фактического текста, здесь мы можем использоватьinline-blockособенность, для этого мы улучшаем наш CSS:
p {
+ display: inline-block;
white-space: nowrap;
}
Таким образом, в настоящее время<p>Фактическая ширина метки фактически равна ширине всего текстового элемента.
Советы: здесь не используется
display: inlineЭто связано с тем, что нам нужно использовать преобразование для прокрутки элемента p ниже, но преобразование нельзя применить к встроенным элементам. Подробности смотрите в спецификации:transformable element
Рассчитать расстояние прокрутки и выполнить прокрутку
Таким образом, у нас есть ширина родительского элемента150px, ширина текста. Тогда легко получить расстояние, необходимое для прокрутки:
Расстояние до прокрутки S = ширина выходящего за пределы текстового элемента - ширина родительского элемента
Таким образом, нам просто нужно найти тот, который может быть представлен, а текущая ширина текста является значением переменной. то есть --transoform.
Так как при использовании transform: translate() для смещения, если выражен процент, опорным элементом процента является сам элемент, то есть, если мыtransform: translate(100%, 0), на самом деле это означает смещение вправо на расстояние ширины элемента.
Тогда мы можем легко получить расстояние S, которое нам нужно преодолеть, с помощью calc --transform: translate(calc(-100% + 150px), 0), встроенный в анимацию:
p:hover {
animation: move 1.5s infinite alternate linear;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(calc(-100% + 150px), 0);
}
}
До сих пор для любого текста, превышающего ширину контейнера, мы можем легко добиться описанного выше эффекта.
Родительский контейнер имеет неопределенную ширину
Конечно, это еще не конец.
Если ширина родительского контейнера также не фиксирована или из-заcalcПроблемы совместимости не могут использовать вышеуказанный метод. Затем нам нужно изменить ширину текущего элемента и ширину родительского контейнера в фиксированном коде CSS.
Так совпало, что CSS действительно может выполнить вышеперечисленные требования, давайте изменим его.animationкод:
@keyframes move {
0% {
left: 0;
transform: translate(0, 0);
}
100% {
left: 100%;
transform: translate(-100%, 0);
}
}
-
transform: translate(-100%, 0)возможность двигаться влевособственная ширина100% -
left: 100%возможность смещаться вправоширина родительского контейнера100%
использовать
margin-leftзаменятьleftТо же самое может быть достигнуто, выраженное в процентахmargin-leftБаза смещения также является шириной родительского элемента.
Таким образом, независимо от ширины родительского контейнера и ширины текстового элемента можно адаптировать отображение прокручиваемого текста переполнения.
Частичные недостатки
- Невозможно определить, превышает ли длина текста ширину родительского элемента
Конечно, приведенное выше решение не является идеальным, если мы хотим прокручивать только тогда, когда длина статьи выходит за пределы, этого нельзя добиться с помощью чистого CSS.
Мы не можем судить о том, превышает ли длина текущего элемента длину родительского элемента с помощью CSS, а затем выборочно анимировать. Ведь CSS отвечает только за стиль, а не за поведение. Таким образом, в реальном использовании все еще может быть необходимо использовать JavaScript, чтобы просто судить, а затем управлять им через класс.
- мерцание анимации
существуетРодительский контейнер имеет неопределенную ширинуВ случае анимация выглядит немного мерцающей, потому что оба свойства нужно анимировать одновременно, а смещение происходит в противоположном направлении. Я пока не нашел особенно хорошего решения для этого.
наконец
Ну вот и конец этой статьи, надеюсь она вам поможет :)
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.