CSS 属性使文本可以在任何地方换行

发布于 2024-12-09 20:05:15 字数 1168 浏览 2 评论 0原文

是否有 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)

...但 NOT 断字在类别名称内。

所以我尝试了这个：

 #categories ul {
  display: inline;
 }
 #categories li {
  display: inline;
  padding: 0 1em;
  white-space: nowrap;
 }
 #categories li:before {
  content: '• ';
 }

不幸的是，这导致它们全部在一行中运行。因此，我需要能够告诉 ul 允许在任何相邻 li 之间的任何位置换行。我该怎么做？

我需要一个纯 CSS 解决方案；我无法更改 HTML...

原文

Is there a CSS property that tells the browser to word-wrap at any position, not only at word boundaries?

My current issue is this. I am faced with HTML similar to this: (I cannot change the HTML, unfortunately)

<div id='categories'>Categories:
    <ul>
        <li>Category One</li>
        <li>Category Two</li>
        <li>Category Three</li>
    </ul>
</div>

I want it to display in a flowing manner according to the width of the viewport:

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)

... but NOT word-breaking within a category name.

So I tried this:

 #categories ul {
  display: inline;
 }
 #categories li {
  display: inline;
  padding: 0 1em;
  white-space: nowrap;
 }
 #categories li:before {
  content: '• ';
 }

Unfortunately this causes them all to run in one line. So I need to be able to tell the ul to allow wrapping anywhere between any adjacent lis. How do I do that?

I need a CSS-only solution; I cannot change the HTML...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

邮友 2024-12-16 20:05:15

包装盒子的一个有用技巧是让它们全部float: left。如果我对您的示例执行此操作，那么我会得到您想要的布局，除了“类别：”被推到右侧之外。不幸的是，我不知道如何选择文本以使其浮动。

我们可以使用 content 重新插入“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: • ';
}

A useful trick for wrapping boxes is to make them all float: left. If I do this to your example, then I get the layout you want except for "Categories:" being pushed to the right. Unfortunately, I don't know of a way to select the text so as to make it floated.

We can use content to re-insert "Categories:" as one of the floated boxes, which leaves the problem of how to hide the existing "Categories:" text without hiding the other contents of #categories. The cleanest way I thought of was to make it transparent. However, this is a CSS3 feature; also, this loses any inherited color due to the need to explicitly set it on the ul.

This stylesheet produces everything you want, but needs some tweaking for spacing.

#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 原文