CSS свойство, чтобы сделать текст пригодным для переноса в любом месте - PullRequest
Новая
       36

CSS свойство, чтобы сделать текст пригодным для переноса в любом месте

1 голос
/ 16 октября 2011

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

Ответы [ 2 ]

2 голосов
/ 16 октября 2011

Полезный трюк для упаковки коробок - сделать их все float: left. Если я сделаю это с вашим примером, то получу нужный вам макет, за исключением того, что «Категории:» будут сдвинуты вправо. К сожалению, я не знаю, как выделить текст так, чтобы он плавал.

Мы можем использовать content для повторной вставки «Категории:» в качестве одного из всплывающих окон, что оставляет проблему с тем, как скрыть существующий текст «Категории:», не скрывая другое содержимое #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: • ';
}
0 голосов
/ 16 октября 2011

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

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

...