-1

I am working on a project and looks like the text-overflow: ellipsis not working in sass.

.content
  background-color: green
  text-overflow: ellipsis
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Here is the link to the project

  • This is not a SASS problem, but a CSS problem. And also a problem of understanding how the property works to begin with ... so start by reading up on it, https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow – CBroe Jul 08 '18 at 12:28

1 Answers1

1

It's working fine when you add all required rules. I modified your code.

.content
  background-color: green
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden

Here and here you can read more about text-overflow property.

Both of the following properties are required for text-overflow:

  • white-space: nowrap;
  • overflow: hidden;

Link to altered Codepen.

Community
  • 1
  • 1
Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
  • why is it one line only? Is it possible to populate the text till the same height of the picture? Here is an example https://www.themoviedb.org/movie –  Jul 08 '18 at 16:13
  • If you want to use multiline text with `text-overflow: ellipsis` you need to use JS. [Here you can read more about it](https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text/33061059#33061059). – Andrzej Ziółek Jul 08 '18 at 16:57