#html #css
#HTML #CSS
Вопрос:
Мне было интересно, есть ли способ создать подобие невидимой строки, через которую мой текст не может проходить в html. Пример:
Как вы можете видеть, текст не может заходить слишком далеко, и инициируется разрыв строки. Как мне это сделать?
Комментарии:
1. Вы должны применить
padding
свойство к контейнеру, в котором находится текст.
Ответ №1:
Вы можете использовать in-line
свойство и overflow-wrap
для того же самого.
overflow-wrap
Если поле должно быть фиксированного размера или вы хотите убедиться, что длинные слова не могут переполняться, то свойство переполнения может помочь. Это свойство прерывает слово, если оно слишком длинное, чтобы поместиться в строке само по себе.
.box { inline-size: 150px; overflow-wrap: break-word; }
lt;div class="box"gt; lt;pgt;Hi I think this will help you acheive what you want to do. Best of lucklt;/pgt; lt;pgt;Hi I think this will help you acheive what you want to do. Best of lucklt;/pgt; lt;/divgt;
Комментарии:
1. переполнение-обертывание не нужно, его можно удалить
Ответ №2:
Один из способов решить вашу проблему-добавить width
родительский HTML-элемент, например:
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;A page for yoult;/titlegt; lt;stylegt; .container1 { width: 150px; } ul { background-color: rgba(255, 255, 169, 0.6); } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="container1"gt; lt;ulgt; lt;ligt;shortlt;/ligt; lt;ligt;long textlt;/ligt; lt;ligt;catlt;/ligt; lt;ligt;onions aren't fruitlt;/ligt; lt;ligt;supermanlt;/ligt; lt;/ulgt; lt;/divgt; lt;div class="container2"gt; lt;ulgt; lt;ligt;shortlt;/ligt; lt;ligt;long textlt;/ligt; lt;ligt;catlt;/ligt; lt;ligt;onions aren't fruitlt;/ligt; lt;ligt;supermanlt;/ligt; lt;/ulgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;
Ответ №3:
вы можете попробовать поместить все это в a div
и установить width
его на нужный размер.