Home  >  Article  >  Web Front-end  >  How to implement multi-line ellipses in css

How to implement multi-line ellipses in css

coldplay.xixi
coldplay.xixiOriginal
2021-03-02 14:24:064811browse

How to implement multi-line ellipses in css: 1. [-webkit-box] displays the object as an elastic retractable box model; 2. [webkit-box-orient] sets or retrieves the sub-elements of the retractable box object. Arrangement.

How to implement multi-line ellipses in css

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to implement multi-line ellipses in css:

Overview:

webkit-line-clamp is a non-standard Property (unsupported WebKit property), which does not appear in the CSS draft specification.

Limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other foreign WebKit properties. Commonly combined properties:

  • display: -webkit-box; must be combined to display the object as a flexible box model.

  • -webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.

  • text-overflow can be used to hide out-of-range text with the ellipsis "..." in the case of multi-line text.

Syntax:

-webkit-line-clamp:<number>
  • Default value: ? ?Indicates unclear;

  • Applies to: block elements

  • Inheritance: None

  • Animability: No

  • Calculated value: Specified value

Value:

d80b5def5ed1be6e26d91c2709f14170:

Block element display The number of lines of text.

* There may be description errors and changes in the new attributes of CSS3. They are for reference only and will be continuously updated.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
<p style="
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
">
 static:对象遵循常规流。top,right,bottom,left等属性不会被应用。 relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素。 absolute:对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。fixed:对象脱离常规流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。center:对象脱离常规流,使用top,right,bottom,left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(CSS3)page:盒子的位置计算参照absolute。盒子在分页媒体或者区域块内,盒子的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3) sticky: 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
</p>
</body>
</html>

Recommended related tutorials: CSS video tutorial

The above is the detailed content of How to implement multi-line 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