Shulou(Shulou.com)05/31 Report--

This article mainly introduces the CSS style how to solve the problem of long text display ellipsis related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this CSS style how to solve the problem of long text display ellipsis article will have a harvest, let's take a look at it.

CSS style solves the problem of long text displaying ellipsis 1. General style

General css style, when the width is not enough, there may be the effect of line wrapping. This effect will certainly not work at some point, and the css style can be modified to solve this problem.

Text-overflow. Demo-split {width: 500px; height: 100px; border: 1px solid # dcdee2; background: palegreen;} .demo-split-pane {padding: 10px; color: red } clip adaptive width is not used ellipsis adaptive width is not used New Vue ({el:'# app' Data () {return {split: 0.4})

The width on the left becomes smaller and the text wraps.

The width on the right becomes smaller and the text wraps.

2. The text is too long to display the ellipsis or the effect of truncation [usually written] .test _ demo_clip {text-overflow: clip; overflow: hidden; white-space: nowrap; width: 200px; background: palegreen;} .test _ demo_ellipsis {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 200px Background: palegreen;} [description:] text-overflow: indicates whether the ellipsis mark is displayed when the text overflows, ellipsis indicates the effect of ellipsis, and clip represents the effect of interception. Overflow:hidden; hides the content of the text overflow. White-space:nowrap; forbids text wrapping. Width: (optional) you can write a fixed value or display the effect adaptively according to the width. Text-overflow .test _ demo_clip {text-overflow: clip; overflow: hidden; white-space: nowrap; width: 200px; background: palegreen;} .test _ demo_ellipsis {text-overflow: ellipsis Overflow: hidden; white-space: nowrap; width: 200px; background: palegreen;} .test _ demo_defined_Width_clip {text-overflow: clip; overflow: hidden; white-space: nowrap; background: bisque } .test _ demo_defined_Width_ellipsis {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; background: bisque;} .demo-split {width: 500px; height: 100px Border: 1px solid # dcdee2; background: palegreen;} .demo-split-pane {padding: 10px;} text-overflow: clip does not show the ellipsis mark, but a simple trimming bar

Text-overflow: ellipsis displays ellipsis marks when text overflows within an object

Custom width Use clip adaptive width according to width adaptive size Use ellipsis adaptive width new Vue ({el:'# app' Data () {return {split: 0.4})

Clip shows the effect of cropping, and ellipsis shows the effect of ellipsis.

This is the end of the article on "how to solve the problem of long text displaying ellipsis in CSS style". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "CSS style how to solve the problem of long text display ellipsis". If you want to learn more, you are 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.