| Kosten | Понедельник, 02 Июля 2018, 21:45 | Сообщение 1 |
| Обычный вариант использования, это заголовки с длинными словами, которые выходят за пределы их контейнера или даже текст регулярного абзаца на языках с длинными составными словами. Установка свойства для auto переноса каждого слова, что пересекает конец ширины контейнера, таким образом, который соответствует языковому словарю.
Если вам нужно убедиться, что за их контейнером не заглядывают только длинные слова, у вас нет хороших вариантов, либо вы нарушаете слово в строках без переносов, либо перенести каждое слово, попадающее на край контейнера, независимо от того, длина.
Также можно добавить дополнительное значение в одно из них hyphens или overflow-wrap, допустив, что перенос может произойти только для слов. Которые слишком долго подходят для их контейнера, в результате чего все другие слова текут нормально.
Код overflow-wrap: hyphenate-word;
hyphens: overflow;
Поскольку браузеры, не поддерживающие дефисы, полагаются на свойство overflow-wrap, чтобы разбить слова по строкам, добавление этой функции к этому свойству может быть разрывом сделки. Таким образом, добавление его в свойство дефиса может иметь больше смысла.
Работа с длинными словами в CSS
Веб состоит из контента, содержание состоит из слов и слов, может быть длинным, очень длинным. Всем, кто связан с Интернетом, рано или поздно придется иметь дело с длинными словами.
Демонстрация
Ежедневно просматривая страницы на мобильном устройстве, я вижу все «неудачи» с длинными словами - сломанные макеты, обрезанные слова и ситуации, подобные изображению на изображении выше.
Поскольку поддержка браузеров для дефиса не очень хороша, давайте попробуем word-break - свойство CSS, чтобы указать, следует ли разрывать строки в словах.
Демонстрация
Поддержка браузера: CSS word-break поддерживается в каждом браузере , за исключением Opera Mini и старых браузеров Opera, основанных на предыстории. Я также обнаружил некоторые ошибки при использовании word-break в сочетании с дефисами.
Поддержка браузера: переполнение текста поддерживается в каждом крупном браузере.
Хотя этот метод звучит как хорошая подгонка с первого взгляда, он имеет недостатки. Прежде всего, он будет обрезать каждый текст после одной строки, даже если вы используете короткие слова, которые идеально подходят и будут разбиваться на большее количество строк. Кроме того, слова могут быть усечены таким образом, что исходное слово получит другое значение - что может быть забавным в лучшем случае или оскорбительным в худшем случае.
Пожалуйста, не используйте text-overflow: эллипсис вообще усечение, это не работа для CSS. Если вам действительно нужно это сделать на стороне сервера и только обрезать после полных слов.
Хотя в большинстве случаев это отлично работает, я узнал, что в Firefox дефисы не будут работать хотя и поддерживаются в сочетании со словом. Кроме того, поскольку word-break не поддерживается в Opera Mini, он там не работает.
Поскольку поддержка браузера для переполнения является фантастической, я протестировал следующее, используя overflow-wrap и дефисы.
Окончательное решение
HTML
Код <div> <h1>Несуществующиелицевыеанимациинадеюсьмере некоторые</h1> <p>Здесь идет описание</p> </body> </div>
CSS
Код div {
background: #f0f0f1;
padding: 9px 18px;
width: 385px;
margin: 0 auto;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 32px;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
}
p {
font-size: 19px;
}
Это решение покажет дефисы для каждого браузера, поддерживающего его, и сломает линии в любом другом браузере - отлично. Несмотря на то, что я протестировал это решение в 26 разных браузерах, я все еще не уверен, что он будет работать
Демонстрация
| | Страна: (RU) |
| |
