Текст в одну строку и троеточие в конце CSS
Текст в одну строку и троеточие в конце. Как это сделать? Text in one line and ellipses at the end.
Для этого есть замечательное CSS3 свойство text-overflow.
Это свойство определяет параметры видимости текста в блоке, если текст полностью не помещается в область видимости. Есть 2 варианта: текст просто обрезается, или текст обрезается и к концу строки добавится многоточие. text-overflow работает только если блоку присвоено свойство overflow со значением hidden или auto или scroll. Также нужно применить свойство white-space с параметром nowrap что скажет браузеру не переносить текст на новую строку.
Значения text-overflow:
clip — Текст который не помещается обрезается.
ellipsis — Текст обрезается и в конце мы увидим троеточие.
Пример использования:
Если вы знаете другие варианты или нашли недочеты в статье — пишите в комментариях, обязательно подправим.
How can I force div contents to stay in one line with HTML and CSS?
How could I force the string to stay in one line (i.e., to be cut in the middle of "Overflow")?
I tried to use overflow: hidden , but it didn’t help.
11 Answers 11
Use white-space:nowrap and overflow:hidden
In your CSS section, use white-space: nowrap; .
I made a fiddle:
RobAgar pointed out white-space:nowrap .
A couple of things here: You need overflow: hidden if you don’t want to see the extra characters poking out into your layout.
Also, as mentioned, you could use white-space: pre (see EnderMB), keeping in mind that pre will not collapse white space whereas white-space: nowrap will.
Как сделать текст в одну строку html
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.10.42345
Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:
- normal – слова не переносятся;
- break-word – автоматический перенос слов;
- inherit – наследование значения родителя.
В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:
Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .
- word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
- normal – используются правила переноса, установленные по умолчанию;
- word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
- keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
- hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
- none – отключает перенос слов в CSS ;
- manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса () ;
- auto – браузер автоматически переносит слова на основе своих настроек.
- С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
- Задав свойству white-space значение « nowrap » ( white-space: nowrap ).
Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
Предотвращение разрывов строки с помощью CSS
Разработчики обычно предпочитают применять на веб-страницах перенос по словам. Перенос по словам ограничивает текст и помогает предотвратить проблемы с дизайном. Также перенос текста по словам позволяет предотвратить необходимость горизонтальной прокрутки. Однако иногда бывает так, что нужно оставить блок текста на одной строке вне зависимости от ее длины. Вы можете предотвращать разрывы строк и перенос текста по словам для определенных элементов, используя свойство CSS white-space .
В этом учебном модуле мы определим стили одного и того же блока текста четырьмя разными способами, один раз с разрывами строки, а три раза без разрывов строки:
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Это даст вам несколько способов выбрать, нужно ли переносить текст по словам.
Предварительные требования
Для данного обучающего руководства вам потребуется следующее:
- Предпочитаемый текстовый редактор кода, например, nano или Visual Studio Code
- Интернет-браузер
- Знакомство с основами HTML. Чтобы узнать больше, вы можете посмотреть нашу серию учебных модулей Создание сайта с помощью HTML.
Шаг 1 — Предотвращение и форсирование разрывов строки в CSS
На этом шаге мы создадим таблицу стилей с тремя разными классами. Каждый из них будет по разному обрабатывать разрывы строк: первый класс будет разбивать текст на строки стандартным способом, а второй и третий классы запретят создание новой строки и разрыва строки.
Для начала создайте новый файл с именем main.css , используя nano или предпочитаемый редактор:
Добавьте в файл следующий код, после чего у вас появятся три класса CSS, использующие несколько свойств, в том числе white-space :
Наш первый класс — .sammy-wrap . Он определяет шесть общих свойств CSS, в том числе border-radius , background-color , border max-width , padding и margin-bottom . Этот класс создает визуальное поле, но при этом не определяет каких-либо специальных свойств переноса текста. Это означает, что строки будут разбиваться по умолчанию.
Наш второй класс — .sammy-nowrap-1 . Он определяет то же поле, что и .sammy-wrap , но добавляет новое свойство: white-space . Свойство white-space имеет множество опций, и все эти опции определяют обработку пробелов внутри заданного элемента. Здесь мы задаем для свойства white-space значение nowrap , предотвращающее разрывы строк.
Наш третий класс — .sammy-nowrap-2 . Он добавляет свойство white-space и еще два дополнительных свойства: overflow и text-overflow . Свойство overflow обрабатывает переполнение с прокруткой, когда содержимое элемента выходит за границы этого элемента. Свойство overflow может сделать этот контент доступным для прокрутки, видимым или скрытым. Мы зададим для свойства overflow значение hidden , а затем используем свойство text-overflow для дополнительной настройки. Свойство text-overflow помогает сообщить пользователю, что часть текста остается скрытой. Мы установили для него значение ellipsis так, что строка не разрывается и не выходит за пределы поля. CSS скрывает лишний текст и использует значок . для обозначения скрытого текста.
Сохраните и закройте файл.
Теперь у нас имеется таблица стилей и мы готовы создать небольшой файл HTML с примерами текста. Далее мы загрузим веб-страницу в браузер и посмотрим, как код CSS может предотвратить появление разрывов строки.
Шаг 2 — Создание файла HTML
После определения классов CSS вы можете применить их к образцам текста.
Создайте и откройте файл с именем index.html в предпочитаемом редакторе. Обязательно поместите его в ту же папку, что и файл main.css :
Добавьте в файл следующий код, который установит main.css как вашу таблицу стилей , а затем применит классы к полю с образцом текста:
Мы назначили стандартный стиль переноса по словам для первого блока текста, стиль nowrap — для второго, и стиль nowrap со свойством hidden и многоточием — для третьего. Для четвертого образца мы назначили стиль sammy-wrap , но здесь мы обходим перенос строк по умолчанию, вставляя в код HTML неразрывные пробелы ( ). Если вам нужно предотвратить разрывы строки в одном частном случае, неразрывные пробелы могут помочь сделать это быстро.
Откройте файл index.html в браузере и посмотрите результаты. Наши четыре текстовых блока будут выглядеть следующим образом:
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Мы успешно настроили свойства CSS четырьмя разными способами так, чтобы допускать или не допускать разрывы строк.
Заключение
В этом учебном модуле мы использовали CSS, чтобы предотвратить разрывы строк в текстовом блоке. Мы задали стиль текста внутри поля и добавили свойство white-space , чтобы заменить правила переноса текста по умолчанию. Чтобы узнать больше о переносе текста по словам и пробелах, изучите свойство white-space CSS в полном объеме.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.