Home  >  Article  >  Web Front-end  >  How to Display Ellipses in a Span with Hidden Overflow?

How to Display Ellipses in a Span with Hidden Overflow?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-30 04:27:02163browse

How to Display Ellipses in a Span with Hidden Overflow?

How to Concatenate Ellipses in Content with Overflow Hidden

In this question, a developer expresses a need to display ellipses ("...") in a span element with hidden overflow. They provide a CSS code snippet showcasing the hidden overflow, but not the display of ellipses.

The provided solution suggests utilizing the text-overflow: ellipsis property, which allows for content truncation and the display of ellipses when the element's content exceeds its width. Here's the corrected CSS code:

<code class="css">span {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

The additional white-space: nowrap property ensures that the content does not wrap onto multiple lines, which can cause ellipses to not appear properly.

The above is the detailed content of How to Display Ellipses in a Span with Hidden Overflow?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn