Блог

Главная - Вопросы по программированию - Элемент Span с шириной и разрывом строки перед

Элемент Span с шириной и разрывом строки перед

#html #css

#HTML #css

Вопрос:

Я получаю контент из API, который включает в себя несколько элементов span, за которыми следует неотмеченный текст.

Пример:

 <span>1</span> Some text. <span>2</span> Some text.

Я хочу, чтобы промежутки имели заданную ширину и разрыв строки перед.

Пример:

  1 Some text.

 2 Some text.

«display: block» в spans допускает свойство width, но также создает разрыв после каждого span.

«display: inline-block» допускает свойство width, но я не могу понять, как создать разрыв строки раньше.

Оставляя интервалы как «display: inline», позволяет использовать разрыв строки перед каждым интервалом (используя ::before content). Однако вы не можете назначить свойство width для встроенных элементов (насколько я видел).

Комментарии:

1. Я не уверен, что вижу здесь актуальный вопрос. Из того, что я могу сказать, вариант номер три ( «display: inline» не допускает свойства width, но я могу создать разрыв с помощью psuedo перед content. ) выполняет то, что вам требуется. В чем именно проблема?

Ответ №1:

Для достижения ожидаемого результата используйте приведенный ниже параметр содержимого и пробела

 span::before {
  content: "A";
  white-space: pre;
}  
 <span>1</span> Some text. <span>2</span> Some text.

codepen —https://codepen.io/nagasai/pen/RdmxrR

Ответ №2:

Если у вас есть оболочка для этого содержимого, вы можете сделать его сетчатым контейнером и легко достичь желаемого:

 .wrapper {
  display:grid;
  grid-template-columns:30px 1fr;
}

span {
 text-align:center;
 outline:1px solid green;
}  
 <div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Еще одна идея с flexbox и display:contents (https://caniuse.com/#feat=css-display-contents )

 .wrapper {
  display:flex;
  flex-wrap:wrap;
  padding-left:10px;
}

span {
 display:contents;
 outline:1px solid green;
}
/*create line break*/
span:before {
  content:"";
  flex-basis:100%;
}

/*control the width*/
span:after {
  content:"";
  width:20px;
}  
 <div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Здесь также есть другой способ, использующий счетчик:

 body {
 counter-reset: count;
}

span {
  counter-increment: count;
  font-size:0; /*remove default content*/
}
/*add line break*/
span::before {
  content: "A";
  white-space: pre;
}

/*add content with counter*/
span::after {
  content:counter(count);
  font-size:initial;
  display:inline-block;
  width:30px; /*control the width*/
  text-align:center;
}  
 <span>1</span> Some text. <span>2</span> Some text.