Условный css — наведение — переполнение
Я хочу скрыть текст, когда он слишком длинный, и показывать его при наведении на него курсора.
Проблема в том, что он также срабатывает, когда текст не переполняется. Как я могу добавить в качестве условия "Если текст выходит за пределы, выполните перевод, если текст не выходит за пределы, не выполняйте перевод"?
Я бы предпочел решение css, а не решение JavaScript, если это возможно, чтобы избежать ненужной сложности (Мне нужно использовать его каждый раз, когда у меня есть текст).
PS: решением может быть разметка scss.
.case {
cursor: pointer;
display: flex;
width: 10em;
height: 3em;
overflow: hidden;
background-color: #444444;
color: white;
margin-top: 2em;
margin-bottom: 2em;
flex-direction: row;
align-items: center;
}
.sp {
width: 100%;
height: auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.case:hover .sp {
transition: 1.3s;
overflow: inherit;
margin-left: -100%;
width: auto;
text-overflow: inherit;
transition-timing-function: linear;
}<div class = "case">
<span class = "sp">Short text</span>
</div>
<div class = "case">
<span class = "sp">Overflowing long text, so long that you can't read it at once!</span>
</div>У вас не может быть условного правила :hover. Возможно, вы могли бы использовать use :hover, чтобы установить скрытое переполнение в auto. Если слишком много текста, переполнение покажет этот текст при наведении. Если текста недостаточно для переполнения, он ничего не должен делать.
Как бы то ни было, одна из причин, по которой вы не можете сделать это в CSS, заключается в том, что обычно считается плохим дизайном заставлять пользователя наводить курсор, чтобы прочитать текст, а затем ждать, пока он прокрутится, в надежде, что он сможет вспомнить все, что он хочет. читать. Он также пропускает несколько требований доступности. Я не говорю, что это плохой вопрос, и мы все были вынуждены реализовывать плохие проекты. Но, просто рекомендация, посмотрите, сможете ли вы найти другой дизайн, который лучше для ваших пользователей (и вам будет проще его реализовать).
Ответы 3
Для этого вам понадобится javascript. Если вы хотите, чтобы это было просто, вы можете сделать что-то вроде этого (когда DOM готов):
document.querySelectorAll('.sp').forEach( el => {
if (el.scrollWidth > el.clientWidth ) el.classList.add('overflows');
})
И измените селектор анимации следующим образом:
.case:hover .sp.overflows {
JS проверит все элементы .sp и при необходимости добавит класс overflows, чтобы он соответствовал селектору.
Вы можете добиться того, чего хотите, только с помощью css, но решение не очень чистое, требует дополнительной html-разметки (вложенных div) и, вероятно, может сломаться в будущем, но если вы настаиваете на том, чтобы делать это без js, вы можете увидеть решение ниже :
.case {
cursor: pointer;
display: flex;
width: 10em;
height: 3em;
overflow: hidden;
background-color: #444444;
color: white;
margin-top: 2em;
margin-bottom: 2em;
flex-direction: row;
align-items: center;
}
.sp {
flex: 1 0 100%;
height: auto;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.case:hover .sp {
transition: 1.3s;
overflow: inherit;
margin-left: -100%;
text-overflow: inherit;
transition-timing-function: linear;
}
.case:hover .case-wrapper {
overflow: visible;
margin-left: 100%;
transition: 1.3s;
transition-timing-function: linear;
}
.case-wrapper {
text-overflow: inherit;
overflow: hidden;
flex: 1 0 100%;
display: flex;
}<div class = "case">
<div class = "case-wrapper">
<span class = "sp">Short text</span>
</div>
</div>
<div class = "case">
<div class = "case-wrapper">
<span class = "sp">Overflowing long text, so long that you can't read it at once!</span>
</div>
</div>
<div class = "case">
<div class = "case-wrapper">
<span class = "sp">It will always scroll all the way to the end and will stop there.</span>
</div>
</div>Имейте в виду, что решение js будет намного чище, удобнее в сопровождении, будет иметь лучшую поддержку в разных браузерах, если вы будете использовать этот подход только css, то делайте это на свой страх и риск.
Это хороший вклад. В любом случае, я собираюсь следовать комментарию @Jon adams и использовать другой способ показать текст пользователю. Этот ответ действительно отлично отвечает на вопрос. Что касается совместимости с несколькими браузерами, я думаю, есть тесты, чтобы убедиться, что он работает на chrome/firefox/edge.
Вот идея, которая опирается на трюк с flexbox, но у вас не будет многоточия. Единственным недостатком является то, что вам нужно определить большую ширину, и у вас может быть небольшая задержка при запуске:
.case {
cursor: pointer;
width: 10em;
height: 3em;
background-color: #444444;
color: white;
margin-bottom: 2em;
position:relative;
overflow:hidden;
}
.sp {
position:absolute;
top:50%;
transform:translateY(-50%);
left:0;
width: 250%; /* big enough */
display:flex;
justify-content:flex-end; /* Center to the end to have a left overflow */
white-space: nowrap;
}
.sp:after {
content:"";
margin-left:auto; /* empty element to push content to the left */
}
.case:hover .sp {
width: 100%; /* decrease the width to 100%*/
transition:3s linear;
transition-timing-function: linear;
}<div class = "case">
<span class = "sp">Short text</span>
</div>
<div class = "case">
<span class = "sp">Overflowing long text, so long that you can't read it at once!</span>
</div>Чтобы понять, что происходит, добавьте границу и окраску:
.case {
cursor: pointer;
width: 10em;
height: 3em;
background-color: #444444;
color: green;
margin-bottom: 2em;
position:relative;
}
.sp {
position:absolute;
top:50%;
transform:translateY(-50%);
left:0;
width: 250%; /* big enough */
display:flex;
justify-content:flex-end; /* Center to the end to have a left overflow */
white-space: nowrap;
border:2px solid red;
}
.sp:after {
content:"";
width:2px;
background:blue;
margin-left:auto; /* empty element to push content to the left */
}
.case:hover .sp {
width: 100%; /* decrease the width to 100%*/
transition:3s linear;
transition-timing-function: linear;
}<div class = "case">
<span class = "sp">Short text</span>
</div>
<div class = "case">
<span class = "sp">Overflowing long text, so long that you can't read it at once!</span>
</div>Работает. К сожалению, многоточие исчезло. Я думаю, что @Jon Adams прав, я должен использовать другую стратегию, чтобы показать информацию пользователю. Спасибо
Я не думаю, что вы можете сделать это только с помощью CSS. Вам понадобится JavaScript.