Блог

Главная - Вопросы по программированию - Переполнение CSS и переполнение текста не работают?

Переполнение CSS и переполнение текста не работают?

#html #css #overflow

#HTML #css #переполнение

Вопрос:

Внутри .story контейнера, который является элементом сетки, много разделов. Для каждой истории мне нужно переполнение текста: многоточие, а для #stories div мне нужна только горизонтальная полоса прокрутки.

У меня следующая структура:

 <div class="container" id="main-section">
  <div id="stories">
    <div class="story">
      <img src="./img/stories/story1-shai.jpg" alt="story" />
      <p>Full name</p>
    </div>
  </div>
</div>
  
 #main-section {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 30px;
}

#main-section #stories {
  height: 120px;
  width: 620px;
  background: white;
  border: 1px #dcdcdc solid;
  border-radius: 5px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: start;
  padding-left: 10px;
  overflow-x: scroll;
}

#main-section #stories .story {
  height: 80px;
  max-width: 74px;
  border-radius: 50%;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.7rem;
}

#main-section #stories img {
  height: 55px;
  width: 55px;
  border-radius: 50%;
}

Я пробовал фиксированную ширину для #stories div, но это только искажало изображения (из-за перекрытия).
Конечным результатом является то, что более длинные имена имеют идеально округленные изображения, более короткие имеют искаженную круговую границу, все имена вырезаны (начало и конец каждого имени не видны), и все .story divs сжимаются внутри #stories div (пробовал overflow-x, но он показываеткак отключено и не имеет значения).

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

1. #main-section #stories в этом нет необходимости. Надеюсь, у вас их нет #else #stories на одной странице, не так ли? Идентификаторы уникальны. используйте только #stories

2. Кроме того, почему вы пропускаете a </div> в своем примере HTML?

3. #main-section существует ли потому, что он содержит больше divs, кроме #stories , я понимаю, что CSS будет работать так же, как и без этой спецификации. Я исправил отсутствующий тег, спасибо!

Ответ №1:

чтобы использовать свойство text-overflow, для текстового элемента должно быть установлено значение overflow:hidden с каким-то свойством width. Я обновил только важные части вашего css:

 #main-section {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 30px;
}
#stories {
  height: 120px;
  width: 620px;
  background: white;
  border: 1px #dcdcdc solid;
  border-radius: 5px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: start;
  padding-left: 10px;
  overflow-x: scroll;
}
#stories .story {
  height: 80px;
  max-width: 74px;
  margin-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.7rem;
}
#stories img {
  height: 55px;
  width: 55px;
  border-radius: 50%;
}

.story p {
  width: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}