Question

是否有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之间的任何地方进行包装。我该怎么做？

我需要一个仅限CSS的解决方案;我无法更改HTML ...

Answer 1

包装盒子的一个有用技巧是将它们全部float: left。如果我对你的例子这样做，那么我得到你想要的布局，除了“类别：”被推到右边。不幸的是，我不知道如何选择文本以使其浮动。

我们可以使用content重新插入“Categories：”作为浮动框之一，这就留下了如何隐藏现有“Categories：”文本而不隐藏其他内容{{1 }}。我想到的最干净的方法就是让它变得透明。但是，这是一个CSS3功能;此外，由于需要在#categories上明确设置它，这会丢失任何继承的颜色。

此样式表可生成您想要的所有内容，但需要对间距进行一些调整。

ul

Answer 2

也许这个？

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

CSS属性使文本可以在任何地方包装

2 个答案: