Метки: включение символа `:` с использованием псевдоэлемента `:: after` в правой части элемента - PullRequest
Новая
       8

Метки: включение символа `:` с использованием псевдоэлемента `:: after` в правой части элемента

0 голосов
/ 15 октября 2018

Я пытаюсь настроить макет в HTML / CSS для отображения данных JSON.Я бы хотел, чтобы надписи были выровнены по левому краю, чтобы справа был двоеточие, и исключить текст, который они содержат, если элемент становится маленьким, чтобы отобразить все его правильно. 

long label  :
long label :
long l... :

Пока у меня естьрабочая реализация Мне было интересно, есть ли способ избавиться от дополнительного элемента span в моем HTML и CSS?

Минимальный рабочий пример:

В настоящее время моя стратегия заключается в переносе текстав пределах span и оберните это в div, класс которого установлен в label.Ellidation включается на span, и он настроен на заполнение большей части содержащего div минус некоторое пространство справа для символа;двоеточие, :, в данном случае.div использует псевдоэлемент ::after для добавления символа.Наконец, display устанавливается на flex и justify-content на space-between, чтобы заполнить горизонтальное пространство между span и символом.

    div {
     border  : 1px solid blue;
     outline : 1px solid invert;
     }
    div.label {
      /* Dimensions */
      width           :             20%;
      border-radius   :             5px;
      padding         : 3px 3px 3px 3px;
      /* Behaviour */
      clear           :            left;
      float           :            left;
      display         :            flex;
      justify-content :   space-between;
      /* Style */
      font-weight    :            bold;
    }
    div.label span {
      /* Dimensions */
      width : /* fallback */ 95%;
      width :  calc(100% - 10px); 
      /* Alternatively : margin : 0px 10px 0px 0px; */
      /* Behaviour */
      /* - Enable text-overflow */
      white-space   : nowrap;
      overflow      : hidden;
      /* Style */
      /* - Format text-overflow */
      text-overflow : ellipsis;
    }
    div.label:after {
      /* Contents */
      content   :   ":";
    }
    div.value {
      /* Dimensions */
      border-radius: 5px;
      padding :   3px;
      /* Behaviour */
      float   :  left;
    }
<article>
  <div class="label"><span>Short label</span></div>
  <div class="value">Short string</div>
  <div class="label"><span>A very long label</span></div>
  <div class="value">A very long string, so long in fact that it will have to wrap more then one line, possibly even more if you have a sufficiently small screen</div>
</article>

(некоторые из них были в Google, но я не могу найти примеры, которые лучше, чем моя реализация, особенно SO, похоже, не имеет связанныхвопрос / ответ)

1 Ответ

0 голосов
/ 15 октября 2018

Вы можете использовать position:absolute с псевдоэлементом, и вы сможете избавиться от лишних span, поскольку вы можете переместить все свойства, примененные на span, к div

* 1006.*
div {
  border: 1px solid blue;
  outline: 1px solid invert;
}

div.label {
  width: 20%;
  border-radius: 5px;
  padding: 3px 13px 3px 3px;
  clear: left;
  float: left;
   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  box-sizing:border-box;
  position:relative;
}


div.label:after {
  content: ":";
  position:absolute;
  right:3px;
}

div.value {
  /* Dimensions */
  border-radius: 5px;
  padding: 3px;
  /* Behaviour */
  float: left;
}
<article>
  <div class="label">Short label</div>
  <div class="value">Short string</div>
  <div class="label">A very long label</div>
  <div class="value">A very long string, so long in fact that it will have to wrap more then one line, possibly even more if you have a sufficiently small screen</div>
</article>
...