Вертикальный текст с отзывчивостью
Я борюсь с вертикальным текстом
Вот мой плункер
Я пытаюсь сделать вертикальный текст, где:
- Если короткий текст входит в div вертикального текста, он должен быть в середине div.
- Если длинный текст входит в div, его следует начинать снизу страницы, но он должен быть отзывчивым (например, если я минимизирую нижний текст моего окна, он не должен скрывать, он поднимется в div), а эллипсы
...должны быть там в последний из большого текста в вертикальном тексте
Я достиг 1. Но 2-й не работает полностью, нет отзывчивости, и текст находится внутри div и не виден.
Спасибо за ваше время :)
Что значит «Если в div идет большой текст»?
пожалуйста, посмотрите мой плункер, вы получите его
Я слышал, но не понимаю.
"Если в div идет большой текст"? это не в моем вопросе, я спрашиваю, находится ли большой текст внутри контейнера div, он переполняет его внизу и скрывается в нем.
Пожалуйста, определите, что такое «крупный текст».
Может это длинный текст?
вау, бинго, ты понял, значит, давно, верно .. !!! не могли бы вы ответить на мои вопросы?
Если в тексте меньше x символов, делайте 1. Если в тексте больше x символов, делайте 2. Честно говоря, это не так сложно понять.
да, но как я могу это сделать в css?
а как насчет отзывчивости
Ответы 1
Это может вам помочь
.main{
transform: translate(0, 50%) rotate(-90deg);
}
.sub{
white-space: nowrap;
width: 250px;
height:20px;
overflow: hidden;
text-overflow: ellipsis;
text-align:center;
position: absolute;
cursor: pointer;
border: 1px solid grey;
background: linear-gradient(to right, white, lightgrey);
border-radius: 2px;
}
.two{
top:20px;
}<div class = "main">
<div class = "sub one">Hello world!</div>
</div>
<div class = "main">
<div class = "sub two">a large text too large to contain tin the div. large text too large to contain tin the div.
</div>
</div>классы должны быть такими же .. можем ли мы добиться этого с помощью этого?
если классы одинаковы, они будут перекрывать друг друга
Это не имеет смысла.