时间戳

首页 > 解决方案 > 通过 CSS attr() 获取属性的第一个/最后一个部分

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

问题描述

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

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

标签： htmlcssdomattributes

解决方案

一般的答案是否定的，但在某些特定情况下，我们可以找到一些技巧。由于您有一个空格作为分隔符，我们可以依靠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>

推荐阅读