#css #whitespace #word-wrap #line-breaks
#css #пробелы #перенос слов #разрывы строк
Вопрос:
Существует ли свойство CSS, которое указывает браузеру переносить слова в любую позицию, а не только в границы слов?
Моя текущая проблема заключается в следующем. Я столкнулся с HTML, подобным этому: (К сожалению, я не могу изменить HTML)
<div id='categories'>Categories:
<ul>
<li>Category One</li>
<li>Category Two</li>
<li>Category Three</li>
</ul>
</div>
Я хочу, чтобы он отображался плавно в соответствии с шириной области просмотра:
Categories: • Category One • Category Two • Category Three
|----------------------------------------------------------------| (viewport)
Categories: • Category One • Category Two
• Category Three
|----------------------------------------------| (viewport width)
Categories: • Category One
• Category Two • Category Three
|----------------------------------| (viewport width)
… но НЕ разбивать слова в названии категории.
Итак, я попробовал это:
#categories ul {
display: inline;
}
#categories li {
display: inline;
padding: 0 1em;
white-space: nowrap;
}
#categories li:before {
content: '• ';
}
К сожалению, это приводит к тому, что все они выполняются в одной строке. Поэтому мне нужно иметь возможность указать ul
, чтобы разрешить перенос в любом месте между любыми соседними li
s. Как мне это сделать?
Мне нужно решение только для CSS; Я не могу изменить HTML…
Комментарии:
1. Есть ли
<ul>
родительский элемент?2. @KyleSevenoaks: Да,
#categories
:-p3. Хе-хе, понял это, добавил это к моему ответу 🙂 Демонстрация работает, но в ней не используется ключевое слово, поскольку я не думаю, что это подходит. Он просто определяет размер элемента UL, чтобы сохранить lis по вашему желанию.
4. Ваш HTML недопустим (как HTML 4, так и HTML 5); пустой текст не допускается
<ul>
. Я не знаю, все ли браузеры (и / или алгоритм HTML5) восстанавливают то же самое.5. @KevinReid: Вы правы. Я проверил еще раз, и голый текст фактически находится за пределами UL. Отредактировано.
Ответ №1:
Полезный трюк для обертывания блоков — сделать их все float: left
. Если я сделаю это с вашим примером, то получу нужный вам макет, за исключением того, что «Категории:» сдвигаются вправо. К сожалению, я не знаю способа выделить текст так, чтобы он плавал.
Мы можем использовать content
для повторной вставки «Categories:» в качестве одного из плавающих полей, что оставляет проблему того, как скрыть существующий текст «Categories:», не скрывая другое содержимое #categories
. Самый чистый способ, о котором я подумал, — сделать его прозрачным. Однако это функция CSS3; кроме того, при этом теряется любой унаследованный цвет из-за необходимости явно задавать его на ul
.
Эта таблица стилей создает все, что вы хотите, но нуждается в некоторой настройке для интервалов.
#categories {
color: transparent;
}
#categories ul {
color: black;
}
#categories li {
display: inline;
float: left;
padding: 0 1em;
white-space: nowrap;
}
#categories li:before {
content: '• ';
}
#categories li:first-child:before {
content: 'Categories: • ';
}
Комментарии:
1. Извините за недопустимый HTML, я скопировал его неправильно. Я отредактировал вопрос. Голый текст фактически находится за пределами UL.
2. @Timwi: я отредактировал свой ответ; Я полагаю, что теперь он отвечает на ваш вопрос, хотя для этого нужно немного поработать с пробелами.
3. @KevinReid Я рекомендую
visibility:hidden
иvisibility:visible
дальшеcolor:transparent
. Дополнительным преимуществом является то, что текст остается невидимым, когда пользователь выбирает текст.4. Идеально! Я не знал, что
visibility
этому можно противодействовать в дочерних элементах.
Ответ №2:
Может быть, это?
<ul>Categories: <li>Category One</li><wbr><li>Category Two</li><wbr><li>Category Three</li></ul>
Комментарии:
1. «(К сожалению, я не могу изменить HTML)»