HTML: Создайте строку, которую текст не может передать

#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 его на нужный размер.