Как увеличить размер текста, сопровождаемого значком? - PullRequest
Новая
       25

Как увеличить размер текста, сопровождаемого значком?

0 голосов
/ 22 февраля 2019

У меня есть боковая панель со списком категорий, за каждой из которых следует значок со списком непрочитанных статей.Поскольку категории определяются пользователем, они иногда могут быть длиннее ширины боковой панели и, следовательно, должны иметь размер эллипса.

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

ul {
  width: 6em;
  background: pink;
  padding: 0.5em;
  list-style: none;
}

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  color: gray;
}
<ul>
  <li>Short <span class="badge">5</span></li>
  <li>Much longer item <span class="badge">13</span></li>
  <li>Another <span class="badge">2</span></li>
</ul>

Я предложил решение на основе flexbox, но для него требуется дополнительный элемент.Есть ли лучший способ сделать это?

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Вот еще одно гибкое решение с возможностью выбора множества «значков» или элементов 

.wrapper {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 30px 0;
  background: rgba(0, 0, 0, 0.1);
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.will-truncate {
  flex: 1;
  min-width: 0;
}

.will-truncate h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badges > div {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: cornflowerblue;
  display: inline-flex;
}


/*nonessentials*/

body {
  padding: 40px;
}

h2 {
  font-size: 1rem;
  font-weight: normal;
}
<div class="wrapper">

  <div class="flex will-truncate">
    <h2>This is a long string that is OK to truncate please and thank you</h2>
    <div class="flex badges">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

</div>
0 голосов
/ 22 февраля 2019

Использование flexbox

Когда мы заключаем ярлык в отдельный элемент, мы можем использовать flexbox: 

ul {
  width: 6em;
  background: pink;
  padding: 0.5em;
  list-style: none;
}

li {
  display: flex;
  white-space: nowrap;
}

.label {
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 0.25em;
}

.badge {
  color: gray;
}
<ul>
  <li><span class="label">Short</span><span class="badge">5</span></li>
  <li><span class="label">Much longer item</span><span class="badge">13</span></li>
  <li><span class="label">Another</span><span class="badge">2</span></li>
</ul>
...