Получить первую / последнюю часть атрибута с помощью CSS attr ()

Question

Можно ли получить только первую часть атрибута, используя attr() в CSS?Под этим я подразумеваю нацеливание на часть атрибута перед определенным символом (главным образом пробелом).Например, из атрибута hello="foo bar" я хотел бы извлечь либо foo, либо bar, просто используя CSS.

С уважением, я бы ожидал, что ответ будет «нет», но яЯ не совсем уверен.

Answer 1

Общий ответ - нет, но в каком-то конкретном случае мы можем найти некоторые хитрости. Поскольку в качестве разделителя у вас есть пробел, мы можем положиться на 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>