Текст в одну строку и троеточие в конце 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 — Текст обрезается и в конце мы увидим троеточие.
Пример использования:
Если вы знаете другие варианты или нашли недочеты в статье — пишите в комментариях, обязательно подправим.
CSS. Как поставить список в одну строку?
.complex_list ul li — Это значит «все li внутри ul, который внутри complex_list». Селектор неправильный, должен быть ul.complex_list li — «все li внутри ul с классом complex_list» и заработает.
Но float: left предназначен для обтекания текста, а не для позиционирования.
Пробуйте ul.complex_list < display: flex; >:
* < margin: 0; padding: 0; >.header < background-color: #169; color: white; text-align: center; height: auto; font: 1.6em arial; padding: auto; >.complex_list < background-color: #2bd; padding: 4px; >ul.complex_list < display: flex; >.complex_list li < font: 0.75em arial; list-style: none; >.complex_list li a < text-decoration: none; margin: 2px; color: #fff; >.complex_list li a:hover
white-space
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.
Действие значений на текст представлено в табл. 1.
| Значение | Перенос текста | Пробелы |
|---|---|---|
| normal | Переносится | Не учитываются |
| nowrap | Не переносится | Не учитываются |
| pre | Не переносится | Учитываются |
| pre-line | Переносится | Не учитываются |
| pre-wrap | Переносится | Учитываются |
HTML5 CSS2.1 IE Cr Op Sa Fx
white-space
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
[window.]document.getElementById(» elementID «).style.whiteSpace
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .
Style.css в одну строчку преобразовался
style.css в одну строчку преобразовался, я его разбила на строки в блокноте. Как можно вернуть в нормальное состояние его?
Неделю назад я прописывала новый шрифт, и не дописала одну букву в его названии. Теперь не могу и файл тот найти где прописывала и с этим беда произошла.
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
НЕ работает в IE body
не работает в Internet Explorere как быть? Chrome & Mazzila , FireFox, Safari — ок вот тут.
Css в style
Подскажите пожалуйста как из css переписать это: ul li < display: block; .
JS and CSS style
Привет, сутки назад начал изучать js, в интернетах, на всех уроках стиль css изменяют только, когда.
На работает style.css
Здравствуйте. Проблема заключается в том,что style.css не работает на телефоне(захожу с айфона). С.
dev — investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
Сообщение было отмечено zisclub как решение
Решение
zisclub, сюда залейте — http://beautifytools.com/css-beautifier.php
Это бьютифер.
Сообщение от zisclub 