1

Скрыть текст получается, однако все идет не как надо: даже если текст скрывается, то его ширина остается такой же выталкивая блок справа, тем самым возникают проблемы с адаптацией. Если задавать ширину в px то все тоже идет не по плану, возникает путаница при адаптации.

body{
  font-family: sans-serif;
}
.item{
  width: 200px;
  display:flex;
  align-items:center;
}
h6{
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:calc(100% - 32px);
}
.circle{
  width:32px;
  height:32px;
  background:#ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
}
<div class="item">
    <div class="item_title">
        <h6>One step closer to the edge, and im gotta break</h6>
    </div>
    <div class="circle">1</div>
</div>

1 ответ 1

3

Задайте width:calc(100% - 32px); родителю h6, так как у Вас не определена ширина для .item_title поэтому она равна 100%, и h6 считает свою ширину относительно 100%, а не 200рх, как Вы хотели

<div class="item">
    <div class="item_title">
        <h6>One step closer to the edge, and im gotta break</h6>
    </div>
    <div class="circle">1</div>
</div>


body{
  font-family: sans-serif;
}
.item{
  width: 200px;
  display:flex;
  align-items:center;
  border: 1px solid red;
}
.item_title{
  width:calc(100% - 32px);
}
h6{
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.circle{
  width:32px;
  height:32px;
  background:#ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.