Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use CSS to achieve multi-line text ellipsis display, the article is very detailed, has a certain reference value, interested friends must read it!

It is not easy to truncate multiple lines of text reasonably, and we usually use several methods to solve the problem:

Overflow: hidden directly hides redundant text

Text-overflow: ellipsis is only suitable for processing single-line text

Various fragile javascript implementations. The reason why this implementation is fragile is due to the need for changes in the length of the text to get relayout layout information, such as width.

The time for writing the original English text is 2012.9.18, which is a meaningful day. However, the author ignores an extended attribute provided by WebKit-webkit-line-clamp, which is not an attribute in the CSS specification. Using this attribute to realize the ellipsis display of multi-line text needs to cooperate with the other three attributes: display:-webkit-box,-webkit-box-orient, and text-overflow: ellipsis;. Among them,-webkit-line-clamp sets the number of lines of text contained in the block element; display:-webkit-box sets the layout of the block element to a scalable layout;-webkit-box-orient sets the layout direction of the telescopic item; text-overflow: ellipsis; indicates that the part beyond the box is indicated by ellipsis.

However, the method to be introduced in this article is accomplished by using the attributes of the CSS specification, combined with special implementation techniques. This means that browsers that implement the CSS2.1 specification are compatible, not just in the mobile domain, but also in traditional PC browsers (you know which browsers I'm referring to). All right, let's see it together.

Realization of ellipsis display of multi-line text overflow by CSS

We divide the details of the implementation into seven steps, in which the simplest part is to truncate the text, while the hardest part is to put an element at the lower right when its parent contains block overflow. and when the parent element does not overflow, the element disappears and is not visible. In order to avoid the difficulty, let's start from a relatively simple place-when the parent inclusion box is relatively small, lay out the child elements to the lower-right corner of the parent inclusion box.

1st primer

In fact, this implementation takes full advantage of the basic rules of element floating. Several situations in the CSS2.1 specification will not be explained in detail here, and readers who do not understand will refer to them for themselves. This code implementation is simple, with three child elements and the height and floating settings of the containing block:

1.prop

Float:left

2.main

Float:right

Fairly short text

3.end

Float:right

.wrap {

Width: 400px; height: 200px

Margin: 20px 20px 50px

Border: 5px solid # AAA

Line-height: 25px

}

.prop {

Float: left

Width: 100px; height: 200px

Background: # FAF;}

.main {

Float: right

Width: 300px

Background: # AFF;}

.end {

Float: right

Width: 100px

Background: # FFA;}

2nd simulation scene

We replace the ellipsis that will be displayed by creating a child element that appears in the correct position in the case of text overflow. In the next implementation, we create a realend element and use the floating position of the end element in the previous section to locate the realend element.

1.prop

Float:right

2.main

Float:left

Fairly short text

4.realend

Position:absolute

3.end

Float:right

.end {

Float: right; position: relative

Width: 100px

Background: # FFA;}

.realend {

Position: absolute

Width: 100%

Top:-50px

Left: 300px

Background: # FAA; font-size: 13px;}

In this step, we are mainly concerned with the positioning of the realend element, setting the offset based on the floating end element. When the end element floats to the position shown in Chapter 2 of the first section (that is, below the prop element), the realend element is just above the end element, at the right 300px-100px=200px, and this position is the lower-right corner of the parent containment box wrap element, which is exactly the result we expect:

If the parent element does not overflow, the realend element appears to the right of it

The solution to this situation is very simple, please see section 7 below, which is illustrated by examples only.

3rd optimal positioning model

In the second section, we set relative positioning for end elements and absolute positioning for realend elements. But we can use a simpler code, that is, only relative positioning. Students who are familiar with the positioning model should know that relatively positioned elements still occupy the text stream and can still set offsets for elements. In this way, you can remove the end element and set the relative positioning only for the realend element.

1.prop

Float:right

2.main

Float:left

Fairly short text

3.realend

Position:relative

.realend {

Float: right

Position: relative

Width: 100px

Top:-50px; left: 300px

Background: # FAA; font-size: 14px;}

The other attributes do not change, and the effect is the same.

4th narrows prop elements

At present, the role of the leftmost prop element is to make the realend element directly below it when the text overflows. In the sample code in the previous sections, in order to intuitively demonstrate, set the width of the prop element to 100px, so now in order to better simulate the actual effect, we gradually reduce the width of the prop element.

1.prop

Float:right

2.main

Float:left

Fairly short text

3.realend

Position:relative

.prop {

Float: left

Width: 5px

Height: 200px

Background: # F0F;}

.main {

Float: right

Width: 300px

Margin-left:-5px

Background: # AFF;}

.realend {

Float: right

Position: relative

Top:-50px

Left: 300px

Width: 100px

Margin-left:-100px

Padding-right: 5px

Background: # FAA; font-size: 14px;}

For the prop element, reduce the width to 5px and leave the remaining attributes unchanged

For the main element, set margin-left:5px so that the main element moves 5px to the left, so that the main element completely occupies the parent element in width

For realend elements, the values of top, left, and width remain the same. Margin-left:-100px and padding-right: 5px are set so that the final width of the box model of the realend element is calculated as 5px.

BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth

Please refer to my previous article on the principle and application of negative margin.

Because the CSS specification states that the value of padding cannot be negative, only margind-left can be set to negative value and equal to its width. The ultimate goal of this is to ensure that the realend element is below the prop element, ensuring that the location is accurate in the case of text overflow:

5th continues to optimize: streaming layout + pseudo elements

At present, the relevant attributes of realend elements are still measured by px, which can be replaced by% for better scalability.

At the same time, prop elements and realend elements can be implemented using pseudo elements to reduce the use of extra tags.

2.main

Float:left

Fairly short text

/ * equivalent to the previous prop element * /

.ellipsis: before {

Content: ""

Float: left

Width: 5px; height: 200px

Background: # F0F;}

/ * equivalent to the previous main element * /

.cubsis > *: first-child {

Float: right

Width: 100%

Margin-left:-5px

Background: # AFF;}

/ * equivalent to the previous realend element * /

.ellipsis: after {

Content: "realend"

Float: right; position: relative

Top:-25px; left: 100%

Width: 100px; margin-left:-100px

Padding-right: 5px

Background: # FAA; font-size: 14px;}

The effect picture is the same as in the previous section.

6th hiding

In the previous implementation, when the text did not overflow, the realend element appeared to the right of the parent element, just as.

Solving this problem is simple, and you urgently need to set up:

.ellipsis {

Overflow:hidden

}

The problem can be solved.

7th is done.

Now we are one step closer to the end, that is, remove the background color of each element and use "…" Replace the text. Finally, in order to optimize the experience, a gradual change is used to hide the "…" Overrides the text and sets some compatibility properties.

At this point, I believe all I care about now is the CSS code:

.ellipsis {

Overflow: hidden

Height: 200px

Line-height: 25px

Margin: 20px

Border: 5px solid # AAA;}

.ellipsis: before {

Content: ""

Float: left

Width: 5px; height: 200px;}

.cubsis > *: first-child {

Float: right

Width: 100%

Margin-left:-5px;}

.ellipsis: after {

Content: "26"

Box-sizing: content-box

-webkit-box-sizing: content-box

-moz-box-sizing: content-box

Float: right; position: relative

Top:-25px; left: 100%

Width: 3em; margin-left:-3em

Padding-right: 5px

Text-align: right

Background-size: 100%

/ * 512x1 image, gradient for IE9. Transparent at 0%-> white at 50%-> white at 100% .clients /

Background-image:url (data:image/png Base64 IVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF/ / / / / / AAAA/ / / / / wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh7D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC)

Background:-webkit-gradient (linear, left top, right top

From (rgba (255,255,255,0), to (white), color-stop (50%, white))

Background:-moz-linear-gradient (to right, rgba (255,255,255,0), white 50%, white)

Background:-o-linear-gradient (to right, rgba (255,255,255,0), white 50%, white)

Background:-ms-linear-gradient (to right, rgba (255,255,255,0), white 50%, white)

Background: linear-gradient (to right, rgba (255,255,255,0), white 50%, white)

}

The above is "how to use CSS to achieve multi-line text ellipsis display" all the content of this article, thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.