Поместите разрыв строки в содержимое: после
Я хотел бы иметь разрыв строки до и после слова or в тексте содержимого. Я пробовал с word-spacing, но это не дало мне точного стиля, который я хотел. Я тоже пробовал поставить \A, а он просто показывает A по тексту. Есть ли способ достичь моей цели?
Ожидал:
Действительный:
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id = "t" data-text = "Drag your image here or Click to add" />
Ответы 4
I also tried to put \A, and it just shows A on the text.
\A будет работать как escape-последовательность для разрыва строки в CSS, но здесь ваш контекст не является CSS, у вас здесь есть настраиваемый атрибут данных, в котором вы удерживаете этот фрагмент текста, поэтому основным контекстом является HTML.
data-text = "Drag your image here or Click to add"
- это числовой HTML-объект для разрыва строки, и я думаю, что его использование здесь имеет наибольший смысл.
Вы можете добиться этого так
создать текст как разные атрибуты и разделить их с помощью "\ A" в псевдо after
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
}
#t:after {
content: attr(data-text1) "\A" attr(data-text2) "\A" attr(data-text3);
font-size: 14px;
line-height: 19px;
color: #000;
opacity: 0.30;
position: relative;
width: 100%;
height: 100%;
display: block;
top: 50%;
white-space: pre-wrap;
vertical-align: middle;
text-align: center;
}<div id = "t" data-text1 = "Drag your image here" data-text2= "or" data-text3 = "Click to add" />Хехехе :) Это довольно сложно. Я ценю ваш другой подход.
Вы также можете использовать для этого «хитрость». Используя два псевдоэлемента и разместите их с помощью flex.
Это не лучшее решение, и оно включает в себя некоторые изменения в html, но в данном конкретном случае оно помогает.
#t {
height: 153px;
width: 401px;
border: 1px dashed #5fb6c5;
background-color: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 14px;
line-height: 19px;
color: #000;
}
#t:after,
#t:before {
position: relative;
width: 100%;
display: block;
text-align: center;
}
#t:after {
content: attr(data-text2);
}
#t:before {
content: attr(data-text1);
}<div id = "t" data-text1 = "Drag your image here " data-text2 = "Click to add">
<span>or</span>
</div>Мы также можем использовать тег HTML, как показано ниже:
<pre>
<div id = "t" data-text = "Drag your image here
or
Click to add" />
</pre>
Большое спасибо! Оно работало завораживающе. Я сделаю ваш ответ принятым через 6 минут.