CSS:如何根据字符高度与行高设置样式

标签 css

请耐心等待,但假设这段代码:

<style>
  span {
    color: black;
    background-color: black;
  }
</style>
<span>Hello world</span>

Hello World

给出的结果如下所示:

███████████

是否可以仅将样式应用于字母高度,而不是字体/行高?实际上,结果看起来像这样:

█▄██▄ ▄▄▄██

最佳答案

不(无论如何都没有背景颜色)。背景颜色应用于整个元素(例如 span 元素),它本质上是一个由 CSS 框模型确定的框。 official recommendation来自 W3C 的 指定背景颜色将填充框模型的内容、填充和边框区域。 CSS3 background (candidate recommendation)为您提供更多功能来控制应用背景颜色的位置,但并不多。

如果你真的想要你刚才在问题中展示的效果,我认为一个 JavaScript 函数可以将“短”字符(例如“w”)转换为“▄”和“高”字符(例如“h” ") 到 "█"会很好地工作。 Here's a demo on jsfiddle .

关于CSS:如何根据字符高度与行高设置样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11821935/

相关文章:

html - 如何在 blogspot 中进行 100% 布局?

html - 如何在图像上制作响应式链接

html - 内容:“”的作用是什么?

html - 一侧宽于另一侧的六 Angular 形元件

html - 从链接的一部分中删除下划线

html - 下推相对div内的绝对溢出div

css - 防止背景图像允许滚动

html - 我将如何设计这样一个网站,其中垂直页面的一半是一种纹理,而另一种则不同?

html - 从 input 标签中调用 CSS 样式文件

javascript - 我如何像谷歌一样获得下拉 ImageView ?