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

This article mainly introduces "how to use CSS style to solve the problem of displaying ellipsis when text is too long". In daily operation, I believe many people have doubts about how to use CSS style to solve the problem of displaying ellipsis when text is too long. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the problem of "how to use CSS style to solve the problem of displaying ellipsis when text is too long." Next, please follow the editor to study!

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.

At this point, the study on "how to use CSS style to solve the problem of long text displaying ellipsis" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.