Селектор CSS и свойство содержимого для добавления пробела между двумя элементами встроенного блока

У меня есть ряд элементов span класса tag (из bootstrap v4), которые примыкают друг к другу без пробела между ними, потому что они происходят из массива JSX-элементов reacj.js:

<span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><!-- ... -->

Это CSS из бутстрапа:

.tag {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

Эти элементы могут переноситься на несколько строк в ячейке таблицы. Я мог бы болезненно добавить пробел между ними с помощью некоторого javascript (https://stackoverflow.com/a/23619085/3446439) или добавьте элемент-обертку (чтобы в JSX был только один корневой элемент) с пробелом. Оба эти варианта меня не удовлетворяют, и я подумал, что это должно быть просто сделать в CSS.

Я попробовал следующее, что было бы идеально, если бы оно работало, но не работает с элементами встроенного блока (https://jsfiddle.net/qjbgzzLr/):

span.tag + span.tag::before {
    content: " ";
}

На данный момент я поставил margin-left на span.tag + span.tag, но это не идеально, так как первый элемент в каждой строке имеет поле слева от него.

Есть ли способ добиться этого с помощью только CSS?


css css-selectors pseudo-element css-content
person beeb    schedule 05.08.2016    source источник
comment
Похоже, решение псевдоэлемента работает для меня - jsfiddle.net/vassuvw4   -  person Paulie_D    schedule 05.08.2016
comment
Решение псевдоэлемента не работает с бутстрапом   -  person beeb    schedule 05.08.2016
comment
Итак, у вас есть эти синие рамки вокруг текста, и вы хотели бы, чтобы между ними было пространство?   -  person thepio    schedule 05.08.2016
comment
Да, я хотел бы, чтобы между ними был пробел, но только если они находятся рядом в одной строке текста.   -  person beeb    schedule 05.08.2016
comment
Выяснил, что псевдоэлемент не работает, потому что это inline-block   -  person beeb    schedule 05.08.2016

Ответы (1)


arrow_upward
1
arrow_downward

Любой псевдоэлемент будет находиться внутри тега span и поэтому не будет создавать горизонтальное пространство между тегами. Маржа — единственное доступное вам решение.

Я предлагаю просто добавить margin-right к каждому тегу.

span.tag {
  margin-right: .25em;
}


span.tag {
  margin-right: .25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />

<span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
  class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
    class="tag tag-primary">text</span>

Чтобы удалить поле из конечного тега, вы можете использовать

span:last-of-type {
margin-right:0;
}
person Paulie_D    schedule 05.08.2016
comment
Хорошо, приму это как ответ, если вы добавите :last-of-type с margin-right равным 0 - person beeb; 05.08.2016
comment
ОК... но на самом деле это не обязательно, чтобы ответ работал. - person Paulie_D; 05.08.2016
comment
На самом деле, чтобы это было точно идентично добавлению пробела между span, также не должно быть правого поля для последнего элемента каждой строки. В данном случае это не так важно, но здесь отступ будет учитываться как длина строки при расчете разрывов строк, чего не было бы, если бы это был символ пробела. (поправьте меня если я ошибаюсь) - person beeb; 05.08.2016