Ellipses problem in css single line text and multi-line overflow text-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Ellipses problem in css single line text and multi-line overflow text

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 22, 2016 am 08:42 AM

It is common to encounter text overflow during the text layout and code writing process. The following summarizes the processing of single-line text overflow and multi-line text overflow ellipsis.

One. Single line text ellipsis

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text1"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #000000;">    这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

Copy after login

<span style="color: #800000;">.text1</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;
}

Copy after login

Here is a simple text example of single line text overflow:

The width attribute here is necessary because you need to know its width to determine overflow;

The overflow attribute is used to hide overflowing text;

　white-space:

Value

Description

normal

Default. White space is ignored by the browser.

pre

White space will be retained by the browser. It behaves like the

 tag in HTML. </td>
</tr>
<tr>
<td>nowrap</td>
<td>The text will not wrap, it will continue on the same line until the <br> tag is encountered. </td>
</tr>
<tr>
<td>pre-wrap</td>
<td>Preserve whitespace sequences, but wrap normally. </td>
</tr>
<tr>
<td>pre-line</td>
<td>Combine whitespace sequences but keep newlines. </td>
</tr>
<tr>
<td>inherit</td>
<td>Specifies that the value of the white-space attribute should be inherited from the parent element. </td>
</tr>
</tbody>
</table>
<p>　text-overflow:</p>
<table class="reference">
<tbody>
<tr>
<th>Value</th>
<th>Description</th>
</tr>
<tr>
<td>clip</td>
<td>Trim text. </td>
</tr>
<tr>
<td>ellipsis</td>
<td>Show ellipses to represent trimmed text. </td>
</tr>
<tr>
<td><em>string</em></td>
<td>Use the given string to represent the trimmed text. </td>
</tr>
</tbody>
</table>
<p>Two. Multi-line text ellipsis </p>
<div class="cnblogs_code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text2"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #000000;">    这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

Copy after login

<span style="color: #800000;">.text2</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">53px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
    -webkit-line-clamp</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;
}

Copy after login

I won’t say more about what I said above here.

The height attribute and the overflow attribute are combined here to hide the text under the ellipsis. You can try the effect without adding it and it will be clear at a glance.

The line-clamp attribute is to control how many lines of text are displayed.

About display and box-orient, let’s talk briefly here:

　Note: The display attribute must be defined before the box can be divided.

　The box-orient attribute specifies whether a box child element should be arranged horizontally or vertically.

Value	Description
horizontal	Specifies that child elements are arranged from left to right on a horizontal line
vertical	Arrange child elements vertically from top to bottom
inline-axis	Child elements are along the inline axis (mapped to landscape)
block-axis	Child elements are along the block coordinate axis (mapped to vertical)
inherit	The value of the box-orient attribute should be inherited from the parent element

If you still don’t understand, you can visit the website: http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/ or look at the various CSS attributes in w3c.

Statement of this Website

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

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

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

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

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1652

CakePHP Tutorial

1412

Laravel Tutorial

1303

PHP Tutorial

1250

C# Tutorial

1224

Related knowledge

Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

See all articles