How to summarize a text within the <span>?

Question

Well I have the following code:

<span>TÍTULO CONTAINER TEXO TEXTO TEXO TEXTO</span>

I need this span has been width: 100% and that has no line break, if the text is too large it has to summarize and put (...).

You can do this with css?

Answer 1

You can define the text-overflow as Ellipsis in his style:

span {
     text-overflow: ellipsis;
 }

Example:

span {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce maximus dui eu libero facilisis venenatis. Pellentesque placerat vulputate semper. </span>