How to set text beyond the ellipses in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set text beyond the ellipses in css

醉折花枝作酒筹

Apr 20, 2021 pm 02:12 PM

css

Method: First use the "overflow:hidden" statement to set the content to be hidden after it exceeds the limit; then use the "text-overflow:ellipsis" statement to set the content to be displayed as an ellipsis when it exceeds the limit; finally use "white-space:nowrap" statement, just set the text without line breaks.

How to set text beyond the ellipses in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Create a new html page, find the

tag on the html code page, create a

tag in the

tag, then enter the displayed content and add a class class as class= "cont". Find the tag, create a <style> tag under this tag, and set the style content with class cont in the <style> tag to be hidden after it is exceeded. <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> .cont{ overflow:hidden;/*内容超出后隐藏*/ } </style> </head> <body> <p class="cont"> 订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p> </body> </html></pre><p>Save the code, use a browser to open the html file to view the effect, and find that the content is not hidden because the height of the content is not set. <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png?x-oss-process=image/resize,p_40" class="lazy" title="1618897643717434.png" alt="How to set text beyond the ellipses in css"/><p>Set the content to be displayed as one line. When the content exceeds, it will be displayed as an ellipsis. Adding content to the cont class is displayed as one line: white-space: nowrap;, and the content after it exceeds is displayed as an ellipsis: text-overflow: ellipsis; (Note: white-space: nowrap; and text-overflow: ellipsis; must be used at the same time to be displayed. is an ellipsis). <pre class='brush:php;toolbar:false;'><style> .cont{ overflow:hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/* 超出内容显示为省略号 */ white-space: nowrap;/* 文本不进行换行 */ } </style></pre><p>After saving the code, use a browser to open it to see the effect of the content being displayed as an ellipsis after it exceeds the limit. <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png?x-oss-process=image/resize,p_40" class="lazy" title="1618897808567717.png" alt="How to set text beyond the ellipses in css"/><p> Recommended learning: <a href="https://www.php.cn/course/list/12.html" target="_blank">css video tutorial</style>

The above is the detailed content of How to set text beyond the ellipses in css. 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

Using Immer for React State ManagementApr 18, 2025 am 10:41 AM

We make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state

The Making of an Animated FaviconApr 18, 2025 am 10:35 AM

It’s the first thing your eyes look for when you’re switching tabs.

Using Your Domain with a Netlify-Hosted SiteApr 18, 2025 am 10:34 AM

Netlify has their own docs for Custom Domains, so if you're looking for horse's mouth technical docs on this stuff, that should be treated as the source of

Pseudo CodeApr 18, 2025 am 10:33 AM

Yonatan Doron wrote a post on Medium not long ago called "Art of Code — Why you should write more Pseudo Code." Love that title, as a fan of pseudo code

Let's Give Grunt Tasks the Marie Kondo Organization TreatmentApr 18, 2025 am 10:31 AM

We live in an era of webpack and npm scripts. Good or bad, they took the lead for bundling and task running, along with bits of Rollup, JSPM and Gulp. But

Branching Out from the Great DivideApr 18, 2025 am 10:27 AM

I like the term Front-End Developer. It's encapsulates the nature of your job if your concerns are:

A Beginner's Journey to Launching a WebsiteApr 18, 2025 am 10:20 AM

In September 2018, I was just a few months into my journey of learning web development. As I'm sure is the case with many new developers, it was a big task

All the New ES2019 Tips and TricksApr 18, 2025 am 10:19 AM

The ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially available in node, Chrome, Firefox, and Safari

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Will R.E.P.O. Have Crossplay?

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.