CSS Сокращение встроенного текста только при необходимости

Question

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

Основная проблема заключается в том, что мне нужно, чтобы значок оставался на одной строке, поэтому я компенсирую его шириной усеченного текста. (width: calc(100% - 40px)), что делает любой неусеченный пример намного короче его нормальной ширины.

См. Фрагмент кода ниже и то, как короткий пример едва заметен.

body, .container {
  width: 100%;
  padding: 0;
  margin: 50px 0;
}

.quantity-value {
  display: inline-block;
  max-width: 100%;
  margin-right: 16px;
  background: #f1f1f1;
}

.value-and-icon-wrapper {
  display: inline-block;
  width: 100%;
}

.icon {
  padding-left: 5px;
}

.truncated-text {
  display: inline-block;
  width: calc(100% - 40px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
  -webkit-line-clamp: 1;
}

<!-- Example 1: short -->
<div class="container">
  <div class="quantity-value">
    <div class="value-and-icon-wrapper">
      <span class="truncated-text">67</span>
      <span class="icon">ℹ️</span>
    </div>
  </div>
  other content
</div>

<!-- Example 2: long -->
<div class="container">
  <div class="quantity-value">
    <div class="value-and-icon-wrapper">
      <span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
      <span class="icon">ℹ️</span>
    </div>
  </div>
  other content
</div>

Answer 1

Это потому, что вы используете много inline-block, а ширина inline-block определяется его содержимым, поэтому, если вы установите 100% - 40px для дочернего элемента, это означает, что его ширина минус 40px

Попробуйте сделать это по-другому, как показано ниже, используя flexbox:

body, .container {
  width: 100%;
  padding: 0;
  margin: 50px 0;
}

.quantity-value {
  display: inline-flex;
  max-width: calc(100% - 16px); /* don't forget to account for margin here */
  margin-right: 16px;
  background: #f1f1f1;
}

.icon {
  padding-left: 5px;
}

.truncated-text {
  flex:1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<!-- Example 1: short -->
<div class="container">
  <div class="quantity-value">
      <span class="truncated-text">67</span>
      <span class="icon">ℹ️</span>
  </div>
  other content
</div>

<!-- Example 2: long -->
<div class="container">
  <div class="quantity-value">
      <span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
      <span class="icon">ℹ️</span>
  </div>
  other content
</div>

Без flexbox вы можете сделать это, как показано ниже:

body, .container {
  margin: 50px 0;
}

.quantity-value {
  display: inline-block;
  max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
  margin-right: 16px;
  background: #f1f1f1;
  padding-right:20px;
  box-sizing:border-box;
  position:relative;
}

.icon {
  padding-left: 5px;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  
}
.truncated-text {
  display:block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<!-- Example 1: short -->
<div class="container">
  <div class="quantity-value">
      <span class="truncated-text">67</span>
      <span class="icon">ℹ️</span>
  </div>
  other content
</div>

<!-- Example 2: long -->
<div class="container">
  <div class="quantity-value">
      <span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
      <span class="icon">ℹ️</span>
  </div>
  other content
</div>

Answer 2

Попробуйте применить стиль text-overflow: ellipsis к элементу div, который содержит текст для усечения.

MDN Документация для переполнения текста