亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Home Web Front-end CSS Tutorial Regarding the ellipses that appear when CSS multi-line text overflows

Regarding the ellipses that appear when CSS multi-line text overflows

Jun 14, 2018 am 10:39 AM
css text overflow 省略號

This article mainly introduces relevant information on examples of ellipses appearing when CSS multi-line text overflows. The content is quite good. I will share it with you now and give it as a reference.

Ellipses appear when multi-line text overflows

This article recommends 2 methods.

1. css

tip: Only compatible with browsers with chrome kernel. ff is not supported. 

.box {
    overflow: hidden; /* 溢出時不顯示溢出的內(nèi)容 */
    text-overflow: ellipsis; /* 發(fā)生溢出時使用省略號代替 */
    display: -webkit-box; /* chrome瀏覽器的私有屬性。顯示為box。 */
    -webkit-box-orient: vertical; /* 垂直排列元素 */
    -webkit-line-clamp: 2; /* 顯示多少行 */
}

Extension

word-wrap

##word-wrapSpecifies the conditions for word wrapping normal, line breaks at word hyphenation points. break-word, break a line within a word. overflow-wrap, changed from word-wrap to overflow-wrap in css3
KeywordDescriptionDefault valueValue
text-overflow

KeywordDescriptionDefault valueValue##test-overflowwhite-space
How to display text beyond the box clip, Trim text. ellipsis, displays the ellipsis. string, displays the specified text.

Keywordswhite-spacebox-orient
DescriptionDefault value Value
How to treat blanks and whether to wrap linesnormal, blank will be ignored by the browser. pre, leave blank. nowrap, the text does not wrap. pre-wrap, keep blanks and wrap normally. pre-line, merge whitespace, retain newlines.

This attribute is not supported by browsers yet. You need to use the private properties of the respective browsers.

Keywordsbox-orientline-clamp
DescriptionDefault valueValue
How to order child elementsinline-axis, child elements are along the inline coordinate axis (mapped to the horizontal direction). horizontal, specifies that child elements are arranged from left to right on a horizontal line. vertical, arranges child elements vertically from top to bottom. block-axis, child elements are along the block axis (mapped to vertical). inherit, inherit the parent element.

Only browsers with chrome core support their own private properties.

How many rows of block-level elements are displayed.

2. jsThere are many ways to use js to control how overflow text is displayed. Here is a recommended script file: ellipsis.js

ellipsis.js

##NameLinkellipsis linkhttps://www.jsdelivr.com/package/npm/ellipsis.jsellipsishttps://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.jsellipsis githttps:// github.com/glinford/ellipsis.jsHow to use.

1. Introduce the script file

<script src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>

2. Use 

var ell = Ellipsis({
    lines: 3
})
var ele = document.getElementsByClassName(&#39;test&#39;)
ell.add(ele)

Extension

It also has some configuration items. If not configured, the default value is used. 

{
    ellipsis: &#39;...&#39;, // 默認顯示的替代文本
    debounce: 0, // 延遲多長時間后執(zhí)行
    responsive: true, // 是否有窗口大小改變時執(zhí)行
    className: &#39;.clamp&#39;, // 默認操作具有這個類的元素。
    lines: 2, // 默認只出現(xiàn)2行元素。
    portrait: null, // 默認不改變，如果你想要在豎屏模式下有不同的行數(shù)，
    break_word: true // 默認截斷單詞。
}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the use of the greater than sign in CSS styles and the inheritance method in Css


The above is the detailed content of Regarding the ellipses that appear when CSS multi-line text overflows. For more information, please follow other related articles on the PHP Chinese website!

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

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1488
72
What is the accent-color property? What is the accent-color property? Jul 26, 2025 am 09:25 AM

accent-color is an attribute used in CSS to customize the highlight colors of form elements such as checkboxes, radio buttons and sliders; 1. It directly changes the default color of the selected state of the form control, such as changing the blue check mark of the checkbox to red; 2. Supported elements include input boxes of type="checkbox", type="radio" and type="range"; 3. Using accent-color can avoid complex custom styles and extra DOM structures, and maintain native accessibility; 4. It is generally supported by modern browsers, and old browsers need to be downgraded; 5. Set accent-col

How to compile SCSS to CSS? How to compile SCSS to CSS? Jul 27, 2025 am 01:58 AM

InstallDartSassvianpmafterinstallingNode.jsusingnpminstall-gsass.2.CompileSCSStoCSSusingthecommandsassinput.scssoutput.css.3.Usesass--watchinput.scssoutput.csstoauto-compileonsave.4.Watchentirefolderswithsass--watchscss:css.5.Usepartialswith_prefixfo

How to change text color in CSS? How to change text color in CSS? Jul 27, 2025 am 04:25 AM

To change the text color in CSS, you need to use the color attribute; 1. Use the color attribute to set the text foreground color, supporting color names (such as red), hexadecimal codes (such as #ff0000), RGB values (such as rgb(255,0,0)), HSL values (such as hsl(0,100%,50%)), and RGBA or HSLA with transparency (such as rgba(255,0,0,0.5)); 2. You can apply colors to any element containing text, such as h1 to h6 titles, paragraph p, link a (note the color settings of different states of a:link, a:visited, a:hover, a:active), buttons, div, span, etc.; 3. Most

CSS transitions tutorial CSS transitions tutorial Jul 26, 2025 am 09:30 AM

CSStransitionsenablesmoothpropertychangeswithminimalcode,idealforhovereffectsandinteractivefeedback.1.Usethesyntaxtransition:propertydurationtiming-functiondelay;todefinetransitions,liketransition:background-color0.3sease0.1s;.2.Specifytransition-pro

How to purge unused CSS? How to purge unused CSS? Jul 27, 2025 am 02:47 AM

UseautomatedtoolslikePurgeCSSorUnCSStoscanandremoveunusedCSS;2.IntegratepurgingintoyourbuildprocessviaWebpack,Vite,orTailwind’scontentconfiguration;3.AuditCSSusagewithChromeDevToolsCoveragetabbeforepurgingtoavoidremovingneededstyles;4.Safelistdynamic

css filter property examples css filter property examples Jul 26, 2025 am 08:08 AM

TheCSSfilterpropertyappliesvisualeffectstoelementsdirectlyinCSS,withcommonusesincluding:1.blur()forsofteningimagesorcreatingdepth,2.brightness()toadjustlightnessordarkness,3.contrast()toenhanceorreducevisualdistinction,4.grayscale()forblack-and-white

Describe different CSS units and when to use them Describe different CSS units and when to use them Jul 27, 2025 am 04:24 AM

In web development, the choice of CSS units depends on design requirements and responsive performance. 1. Pixels (px) are used to fix sizes such as borders and icons, but are not conducive to responsive design; 2. Percentage (%) is adjusted according to the parent container, suitable for streaming layout but attention to context dependence; 3.em is based on the current font size, rem is based on the root element font, suitable for elastic fonts and unified theme control; 4. Viewport units (vw/vh/vmin/vmax) are adjusted according to the screen size, suitable for full-screen elements and dynamic UI; 5. Auto, inherit, initial and other values are used to automatically calculate, inherit or reset styles, which helps to flexibly layout and style management. The rational use of these units can improve page flexibility and responsiveness.

What is a stacking context? What is a stacking context? Jul 27, 2025 am 03:55 AM

Astackingcontextisaself-containedlayerinCSSthatcontrolsthez-orderofoverlappingelements,wherenestedcontextsrestrictz-indexinteractions;itiscreatedbypropertieslikez-indexonpositionedelements,opacity

See all articles