Избегайте неестественных разрывов слов
у меня есть<h1> название с длинным словом, например следующее. Ширина браузера, конечно, зависит от устройства, но я заметил, что на одном из моих устройств это выглядит так:
что не очень хорошо разбирается в словах.
Как вместо этого попросить браузер делать "более приятные" взломы?
Пример: Internationali-sation или -tion или -on, но неn один в следующей строке.
Вот как воспроизвести проблему (я жестко запрограммировал260px здесь, чтобы воспроизвести то, что я видел на своем устройстве, но на самом деле это не жестко запрограммировано в моем коде):
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }<div class="a">
<h1>Internationalisation</h1>
</div>
3 ответа
Вы можете вручную вставить мягкий перенос­ который виден только при разрыве. Он предлагает место, где браузер может нарушить это слово. Это что-то вроде<wbr> но с дефисом. Что-то вроде этого:
h1 { word-wrap: break-word; }
.small { width:260px; }<h1 class="small">Internationali­sation</h1>
<h1>Internationali­sation</h1>Есть много проблем с автоматическим разрывом слов, которые обычно зависят от словаря браузера ( можно использовать дефисы ) или внешних скриптов. Вы также можете узнать больше об этом в других вопросах, например, можно ли включить автоматическую расстановку переносов в HTML / CSS? .
-
1Каждый день - школьный. Проголосовали. Squiggs.
В <wbr> тег существует для этой цели.
The HTML
<wbr>element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }<div class="a">
<h1>Internationali<wbr>sation</h1>
</div>В качестве альтернативы вы также можете добавить к слову пробел нулевой ширины , хотя это может вызвать странное поведение при попытке скопировать строку. (Здесь мы получаем несколько вопросов о переполнении стека, когда код не работает, потому что он содержит скрытое пространство нулевой ширины.)
Ну, вы могли бы вообще предотвратить поломку ...
.a { width: 260px; background-color: yellow; }
h1 { white-space: nowrap; }<div class="a">
<h1>Internationalisation</h1>
</div>Или. установите промежутки внутри вашего контента, чтобы обозначить, где должно произойти нарушение. Это громкое слово, а не два отдельных слова, поэтому браузер ничего не знает, если вы его не обучите.
.a { width: 260px; background-color: yellow; }
h1 { word-wrap: break-word; }
h1 span { display: inline-block; }<div class="a">
<h1>International<span>isation</span></h1>
</div>Другие вопросы
- Фоновое изображение заголовка исчезает и исчезает при прокрутке с нижним градиентом в приложении React1 ответ
Мое изображение заголовка исчезает (исчезает при прокрутке). Я достиг этого остроумного javascript в моем приложении React:useEffect(() => { const handleScroll = () => { if (parallaxDiv.current) { parallaxDiv.current.style.backgroundPositionY = `${ window.pageYOffse...
- Выберите элемент, необходимый в vuejs, не работает1 ответ
Я новичок в vuejs. Я хочу сделать элемент выбора из раскрывающегося списка обязательным, я попытался добавить требуемый атрибут, как в приведенном ниже коде. <v-select :items="fournisseursByClient" ...
- как добавить ссылки на липкую панель навигации1 ответ
Я попытался добавить фоновое изображение для своего веб-сайта django, и это вообще не сработало. Я использую этот ответ из stackoverflow, а также ссылку на вопрос stackoverflow. Но это не сработало. А также я переношу изменения в базу данных. добавить фоновое изображение как в методе cssbackground-i...
- Blazor выделит выбранную строку таблицы1 ответ
В моем проекте Blazor есть следующая таблица:<table class="table table-bordered accountTable @HighlightSelected" > <thead> <tr> <th>Id</th> <th>Name</th> </tr> </thead> <tbody> ...
- Как заблокировать меню боковой панели, скрытое при обновлении страницы1 ответ
У меня есть меню боковой панели, которое было успешно скрыто и отображено. Когда меню боковой панели скрыто и я обновляю страницу или браузер, скрытое меню боковой панели вернется к своему первоначальному виду, а не в том положении, в котором оно было скрыто. Вопрос в том, как заблокировать, чтобы о...
- Если, то Заявления в распознавании речи HTML [закрыто]1 ответ
Закрыто. Этот вопрос требует подробностей отладки . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме Stack Overflow. Закрыт в прошлом месяце . Уточните этот вопрос Итак, я пытаюсь сделать голосового помощника html, и я борюсь с оп...
- Материал пользовательского интерфейса, вариант целевой кнопки css-селектор1 ответ
Я создал 3 класса, которые применяют градиент для каждого варианта кнопки пользовательского интерфейса материала. Классы:gradient ,outlinedGradient , а такжеcontainedGradient , [IMG_OUR_ID=8797.png] Но я хотел просто создать один классgradient а затем создайте более конкретные селекторы для случаев,...
- Как создать html-страницу со ссылкой [закрыто]1 ответ
Закрыто . Этот вопрос должен быть более конкретным . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав этот пост . Закрыт в прошлом месяце . Уточните этот вопрос Как разместить видео ключи на моем...
- Как добавить проверку ввода в React?2 ответ
У меня простая форма, в которойfirstName а такжеlastName . <label htmlFor="firstName">First Name: </label> <input type="text" className="form-control" id="firstName" name="firstName" value={basicDet...
- Фильтровать видео YouTube по категории1 ответ
В настоящее время я работаю над проектом, который отображает множество популярных видео YouTube из нескольких регионов. В настоящее время я работаю над функцией, которая позволяет пользователям фильтровать результаты по категориям и не имею честного представления о том, с чего начать реализацию. Вот...
"Завидую тестировщикам: все хотят с ними дружить."