html - 通过 CSS attr() 获取属性的第一部分/最后一部分

Question

是否可以在 CSS 中使用 attr() 只获取属性的第一部分？我的意思是，针对特定字符(主要是空格)之前的属性部分。例如，我想从属性 hello="foo bar" 中提取 foo 或 bar，只需使用 CSS。

真诚地，我希望答案是“否”，但我不太确定。

Answer 1

一般答案是否定的，但在某些特定情况下我们可以找到一些技巧。由于您有一个空格作为分隔符，我们可以依赖 word-spacing和/或 text-indent和一些溢出为了隐藏单词的一部分然后调整宽度。

这是一个例子:

.first:before {
  content: attr(data-hello);
  word-spacing: 50px;
  display: inline-block;
  vertical-align: top;
  max-width: 40px;
  overflow: hidden;
  white-space: nowrap;
}

.first:after {
  content: attr(data-hello);
  text-indent: -60px;
  word-spacing:50px;
  display: inline-block;
  vertical-align: top;
  max-width: 40px;
  overflow: hidden;
  white-space: nowrap;
}

<span class="first" data-hello="foo bar">
  some text
</span>