Question

我正在寻找一种使用CSS创建以下效果的方法。

1 dot at each char

我找到了一些在文本下方放置点的解决方案（white dots below HTML text），但我不想要“点缀下划线”，我希望每个角色下面只有一个点。此外，点应该随着文本的字体大小而增加（尽管如果需要，我可以用JS来解决这个问题）。

我怎么能实现这个目标？

Answer 1

CSS Text Decoration Module Level 3定义了这些属性：

text-emphasis-style

此属性将重点标记应用于元素的文本。 [...]
每个角色都会画一次标记。
text-emphasis-position

此属性描述了绘制重点标记的位置。

当浏览器支持时，您将可以使用

text-emphasis-style: dot;
text-emphasis-position: under left; /* or `under right` */

＆＃13;

body {
  text-emphasis-style: dot;
  text-emphasis-position: under left;
  -webkit-text-emphasis-style: dot;
  -webkit-text-emphasis-position: under;
  font-size: 300%;
}

＆＃13;

ieuw

＆＃13;

然而，它尚未获得广泛支持。有关详细信息，请参阅caniuse。

Firefox自版本46以来支持它，或者如果您启用layout.css.text-emphasis.enabled标志，则支持版本45。

Chrome从版本25开始支持它，但需要-webkit-供应商扩展程序。

注意标准text-emphasis-position使用2值语法（分别用于水平和垂直写入模式），但也有suggestion允许1值语法。但是，-webkit-text-emphasis-position不允许使用2值语法，只允许使用1值语法。

Answer 2

您无法使用CSS 为每个字符设置连续的文本块样式。

（将来可能会有支持，正如@Oriol在他的回答中指出的那样。我只是在处理当前的情况。）

您可以基于每个元素设置代码的样式，因此如果将每个字符包含在一个单独的元素中（使用char类），则可以使用以下内容添加点： p>

.char {
    display: inline-block;
    position: relative;
}
.char::before {
    content: '.';
    display: inline-block;

    /* position the dot underneath the character */
    position: absolute;
    bottom: -0.5em;
    left: 0;

    /* center the dot horizontally */
    text-align: center;
    width: 100%;

    /* ... (style the dot to your liking) */
}

这会使DOM非常混乱，但它会满足您的要求（使用字体大小缩放等）。

Answer 3

上述两种解决方案的摘要：

<强> 1。使用现代CSS在每个字母下面设置一个点

HTML：

0,<span class="dotunderletter">1</span> = 
<br>
0,<span class="dotunderletter">01</span> = 
<br>
0,001 = 1 · 1/1.000 =

CSS：

.dotunderletter {
    text-emphasis-style: dot;
    text-emphasis-position: under left;
    -webkit-text-emphasis-style: dot;
    -webkit-text-emphasis-position: under;
}

结果：

问题：线高变化。

<强> 2。为每个单独的char使用CSS before元素

HTML：

0,<span class="char">1</span> = 
<br>
0,<span class="char">0</span><span class="char">1</span> =
<br>
0,001 = 1 · 1/1.000 =

CSS：

.char {
    display: inline-block;
    position: relative;
}
.char::before {
    content: '.';
    display: inline-block;
    position: absolute;
    bottom: -0.5em;
    left: 0;
    text-align: center;
    width: 100%;
}

结果：

问题：每个char都需要放入span元素中。但是线高不会改变，它适用于大多数浏览器。

感谢hon2a和Oriol的有用答案！

使用CSS在每个字符下面添加一个点

3 个答案: