Как заставить все слова, которые переполняют строку, переноситься на следующую строку? - PullRequest
0 голосов
/ 02 мая 2020

Ширина моего документа установлена ​​на 100vw и реагирует на изменения размера области просмотра.

Ну, почти. Бывает, что некоторые слова переполняются, но не переносятся на следующую строку. Это создает небольшую горизонтальную прокрутку:

enter image description here

При небольшом уменьшении ширины браузера слово (tremit) переносится на следующую строку .

Мне кажется, что к переносу слов применяется некоторый вес, например "до этого переполнения удерживайте слово в строке, а если выше, то переносите его" .

Первый вопрос: верно ли это предположение?

Если так: Есть ли способ уменьшить этот вес до нуля, то есть заставить слово переноситься всякий раз, когда он переполняется?

Я думал, что overflow-wrap: anywhere; будет решением, но добавление его к <body> ничего не изменит:

body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 150%;
    width: 100vw;
    overflow-wrap: anywhere;
}

1 Ответ

0 голосов
/ 02 мая 2020

Полагаю, вы неправильно поняли проблему, с которой сталкиваетесь. Нет ничего плохого в переносе слов, но пользовательский агент добавляет некоторое поле по умолчанию в тело. В основном мы не будем добавлять текст непосредственно к body. Поэтому я удалил поле по умолчанию и добавил вместо него отступы. Пожалуйста, проверьте мой пример кода. Я предполагаю, что перенос слов происходит естественным образом, горизонтальной прокрутки нет. Демоверсия здесь .

*{
box-sizing:border-box;
}

body{
width:100%;
margin:0;
padding:8px;
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
...