Setting method: 1. Use "overflow:hidden;" to hide the excess part; 2. Use "-webkit-line-clamp:number of lines;" to limit the number of lines of displayed text; 3. Use "text-overflow:ellipsis;" displays ellipses to represent hidden excess.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css sets multiple lines beyond the ellipses
Implementation ideas:
1. Use the "overflow:hidden;" statement without Displaying content that exceeds the object size means hiding the excess part;
2. Use the "-webkit-line-clamp: number of lines;" statement to limit the number of lines of displayed text
3 , use the "text-overflow:ellipsis;" statement to hide out-of-range text with the ellipses "..."
Implementation code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
css多行文本超出长度显示省略号，css多行文本超出长度显示省略号，
css多行文本超出长度显示省略号，css多行文本超出长度显示省略号
</div>
</body>
</html>Rendering:
Note: Most mobile browsers are based on WebKit core, so this method is suitable for mobile terminals;
# #-webkit-line-clamp
Used to limit the number of lines of text displayed in a block element. This is an unsupported WebKit property that does not appear in the CSS draft specification;display: -webkit-box
Display the object as a flexible box model;-webkit-box-orient
Set or retrieve the arrangement of the child elements of the flex box object;
css video tutorial)
The above is the detailed content of How to set multiple lines to display ellipsis in css. For more information, please follow other related articles on the PHP Chinese website!
ToastApr 19, 2025 am 10:30 AMOne day, all the sudden, I started hearing jokes about toast. I had no idea what the context was. I assumed some friends just got started telling toast jokes,
Protecting Vue Routes with Navigation GuardsApr 19, 2025 am 10:29 AMAuthentication is a necessary part of every web application. It is a handy means by which we can personalize experiences and load content specific to a
Different Approaches for Creating a Staggered AnimationApr 19, 2025 am 10:28 AMAnimating elements, at its most basic, is fairly straightforward. Define the keyframes. Name the animation. Call it on an element.
Hey, let's create a functional calendar app with the JAMstackApr 19, 2025 am 10:22 AMHey, let's create a functional calendar app with the JAMstack
The Fight Against Layout JankApr 19, 2025 am 10:20 AMA web page isn't locked in stone just because it has rendered visually. Media assets, like images, can come in and cause the layout to shift based on their
How I Created a Code Beautifier in Two DaysApr 19, 2025 am 10:19 AMI recently drew up a wireframe for a code beautifier. The next day, I decided to turn it into a real tool. The whole project took less than two days to
Build a Chat App Using React Hooks in 100 Lines of CodeApr 19, 2025 am 10:16 AMWe’ve looked at React Hooks before, around here at CSS-Tricks. I have an article that introduces them as well that illustrates how to use them to create
The Many Ways to Include CSS in JavaScript ApplicationsApr 19, 2025 am 10:08 AMWelcome to an incredibly controversial topic in the land of front-end development! I’m sure that a majority of you reading this have encountered your fair
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
Hot Tools
Dreamweaver Mac version
Visual web development tools
Notepad++7.3.1
Easy-to-use and free code editor
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
