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

是否可以使用CSS中的attr()仅获取属性的第一部分？我的意思是，将属性的一部分定位到某个字符（主要是空格）之前。例如，我想仅通过使用CSS从属性hello="foo bar"提取foo或bar。

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

最佳答案

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

这是一个例子：

.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>