Блог

Существует ли свойство 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…

Полезный трюк для обертывания блоков — сделать их все 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: • ';
}
  

Может быть, это?

<ul>Categories: <li>Category One</li><wbr><li>Category Two</li><wbr><li>Category Three</li></ul>