Question

是否可以使用纯CSS显示字符串的前两个字母？

到目前为止，我已经尝试过（没有成功）：

：第一个字母（仅针对第一个字母，但对我来说无效）
：nth-of-everything（需要额外的javascript）
text-overflow：省略号; （正在加分）
溢出：隐藏; （仅当文本大小没有改变时才有效，笨拙的解决方案）

还有其他办法吗？

Answer 1

实际上，有一种方法可以在纯CSS中执行此操作！它使用ch字体相关单位。

.two_chars{
  font-family: monospace;
  width: 2ch;
  overflow: hidden;
  white-space: nowrap;
}

.large{
  font-size: 2em;
}

<div class="two_chars">
  Some long text.
</div>
<div class="two_chars large">
  Even longer text.
</div>

不幸的是，这仅适用于 等宽字体 ，而不适用于旧浏览器。

Answer 2

虽然我同意css主要用于造型;有用例＆＃34;显示＆＃34;内容使用：

text-overflow: ellipsis

<div class="myClass">
  My String
</div>

.myClass {
  white-space: nowrap;
  width: 39px;
  overflow: hidden;
  text-overflow: ellipsis;
}

将显示截断的＆＃34;我的＆＃34;

Fiddle

Answer 3

如果您不想使用等宽字体，而只想在可用/指定的宽度中显示任意数量的字符（不显示半角字符），则可以在创建时使用工休规则确保您没有显示第二行：

.initials {
  display: inline-block;
  width: 40px;
  font-size: 24px;
  font-weight: 300;
  overflow: hidden;
  word-break: break-all;
  height: 80px;
  line-height: 80px
}

此处的示例：https://codepen.io/stevendegroote/pen/GRgjQoG

希望这对任何人都有帮助。

Answer 4

就像你说的那样，你可以使用nth-everything做到这一点，但它需要额外的javascript。

对于单个字母，您可以这样做：

#txt {
  visibility: hidden;
}

#txt::first-letter {
  visibility: visible;
}

<p id='txt'>hello</p>

这里是小提琴：https://jsfiddle.net/nvf890vo/

对于多个字母，您必须与html混合，例如：

<p><span class='show'>He</span>llo</p>

将可见状态应用于课程＆＃34; show＆＃34;。

CSS：仅显示字符串的前两个字母

4 个答案: