CSS overflow and text-overflow not working?

Question

There are many .story divs inside the container which is a grid item. For each story I need text-overflow: ellipsis and for the #stories div I need only horizontal scroll bar.

I have a the following structure:

<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%;
}

I've tried a fixed width for the #stories div but it only made the images to be distorted (due to overlapping). The end result is that the longer names has a perfectly rounded images, the shorter ones has a distorted circular border, all of the name are cut (the beginning and the end of each name isn't visible) and all of the .story divs are compressed within the #stories div (tried overflow-x but it shows as disabled and makes no difference).

#main-section #stories no need to. Hopefully you don't have any #else #stories in the same page, have you? IDs are unique. use only #stories — Roko C. Buljan
– Roko C. Buljan, Commented Sep 24, 2020 at 20:33
#main-section is there because it contains more divs other than #stories, I understand the CSS will work the same without this specification. I've fixed the missing tag, thanks! — Kadtamir
– Kadtamir, Commented Sep 24, 2020 at 20:44

Yalcin Kilic · Accepted Answer · 2020-09-24 20:41:19Z

0

to use text-overflow property the text-element has to be set to overflow:hidden with some kind of width-property. I updated just the important parts of your 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;
}

answered Sep 24, 2020 at 20:41

Yalcin Kilic

8206 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS overflow and text-overflow not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related