css ellipsis

In order to keep the page neat and beautiful, in many cases, we often need to hide the text beyond the length. This is commonly used in list entries, titles, names, and other places.(1). Text beyond one line, omit out of the section, Show ' ... 'If this situation is more, you can use a suitable class name for reuse.. line-limit-length {Overflow:hidden;Text-overflow:ellipsis;White-space:nowrap; The text does not wrap so that more than one line of the part is intercepted, showing ...}(2). Can be g

Test browser: IE6/7/8/9, opera12.02, firefox15.0.1, Chrome The code is as follows Copy Code If we want to define text-overflow:ellipsis for P tags, we can write this: code is as follows copy code P { White-space:nowrap; width:100%; /* IE6 need to define width */ Overflow:hidden; NBSP;NBSP;NBSP;NBSP;NBSP;NBSP;NBSP;NBSP;NBSP;NBSP;NBSP;NBSP - o-text-overflow:ellipsis;/* Opera */ text-overflow:

The use of text-overflow:ellipsis to overflow text display ellipsis has two advantages, one is not through the program to limit the number of words, the second is conducive to SEO. You need to use a list of article headings that display ellipses for overflow text, which is more friendly to search engines because the title is not actually truncated, but is limited to width and not displayed. The usual practice is this: 1.overflow:hidden; 2.text-overfl

1, if it is a single line of text:Overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2, if it is multi-line text, the text box height is set to a multiple of the text line, and then after the text to build a content for the "..." width of 1em and set the text background color of after pseudo-class, relative to the text box set absolute position is the bottom 0 right 0, which can be visually achieved the same ellipsis effect.3, or create a new e

You need to set the width to overflow display ellipses.Single-line text:. am-text-truncate { word-wrap:normal;/* for IE */ text-overflow:ellipsis; When text overflows, the ellipsis is displayed to represent the trimmed text. White-space:nowrap; The text in the specified paragraph does not wrap Overflow:hidden;}　　Word-wrap:normal/break-word;Normal wraps only at the allowed hyphenation points (the browser keeps the default processing).Br

One, single-line text truncation word{ text-overflow: ellipsis; /* display ellipses instead of cropped text */ white-space: nowrap; /* blank handling does not break line */ Overflow: hidden; /* Overflow Hide */} Effect:Two, multi-line text truncation wordP{Display:-webkit-box;/*Set the box as a flexible box container*/-webkit-box-orient:Vertical;/*set the inner arrangement of boxes to be arranged vertically*/-webkit-line-clamp:2;/*Show t

width:100%;//need to specify widthoverflow:hidden;//overflow HiddenText-overflow:ellipsis;white-space:nowrap;//Force No Line breakText-overflow:ellipsis;The main style here is text-overflow:ellipsis;However, Text-ellipsis is a special style, the explanation is this: the Text-overflow property is only annotations, and if the text overflows, the ellipsis is displayed. No other style attribute definitions are

Style Code, four attributes are required, and the width must be set on the current container. The specified width of the parent container is invalid: The code is as follows:Copy code . Box {Width: 200px;White-space: nowrap;Overflow: hidden;Text-overflow: ellipsis;} Tests are supported by IE6, IE7, IE8, IE9, Chrome, and Firefox.Test instance The code is as follows:Copy code

. test{ width:200px; height:50px; border:1px solid red; padding:10px; Overflow:hidden; /* Do not display content that exceeds the width of the object * * Text-overflow:ellipsis; /* Displays an ellipsis (...) when text overflows inside an object. ）*/ White-space:nowrap; /* Limit all text to be displayed on a single line * * }

Previously, I thought that the single-line text overflow appended ellipsis could not be compatible with all browsers. After being mentioned by Comrade Yuan Quan, the solution was smooth: . Box {Width: 200px;White-space: nowrap;Overflow: hidden;Text-overflow: ellipsis;} Style code, four attributes are required, and the width must be set on the current container. The specified width of the parent container i

1. Single line out of display ...p{ width:200px; Overflow:hidden; Text-overflow:ellipsis; White-space:nowrap;}Effect:2. Multiple lines out of display ...p {width:100px; /*Limit width*/position:relative; Line-height:20px; Max-height:40px; Overflow:hidden;} P::after {content:"..."; Position:absolute; Bottom:0; Right:0; Padding-left:40px; Background:-webkit-linear-gradient (left, Transparent, #fff -%); Background:-o-linear-gradient (right, Transparent, #fff -%); Background:-moz-linea

Display content 2displaying content 4, displaying content 4, displaying content 4, displaying content 4CSS control Li line character overflow with ellipsis instead of

. test{ width:200px; height:50px; border:1px solid red; padding:10px; Overflow:hidden; /* Do not display content that exceeds the width of the object */ Text-overflow:ellipsis; /* Show ellipsis (...) when text inside an object overflows. ）*/ White-space:nowrap; /* Restrict display of all text in one line */ } [Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute] 

Html:DOCTYPE HTML>HTML>Head> MetaCharSet= "Utf-8"> Metaname= "Viewport"content= "Width=device-width"> title>JS Bintitle>Head>Body> Div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem est libero fugit placeat distinctio deserunt ipsam eveniet, Odit officiis laudantium, quos, Corporis Saepe Earu M ID quia unde impedit atque quod. Div>Body>HTML>Css:Div{width:400px;Overflow:Hidden;Text-overflow:ellipsis;Word-break:Break-all;/*A word for a good-looking, allow to be opened*

Display content 2displaying content 4, displaying content 4, displaying content 4, displaying content 4CSS control Li line character overflow with ellipsis instead of

Originally thought that the text overflow processing is more complex, did not expect such a simple sentence to take care of, CSS is really magical: . li {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} Now learn to want to understand the meaning of each specific attribute, in the mind, can be written out in the future. The following properties are checked: White-space:nowrap; Indicates that the text will not wrap, continue on the same

During website creation, when the List displays the news title or product title, the string is too long, leading to incorrect page layout. How can this problem be solved?ProgramThe method of intercepting extra characters. Here we introduce a method implemented using CSS styles, because the text still exists on the page, but it is not displayed, so it is also good for Seo optimization. First, you must set the width and height, and then use a style su

width = "500px" class = "MyTable" > width = "20%" >One PIECE, the king of the Sea thieves width = "80%" >One PIECE "in the story for" a big Pibo "meaning. The story depicts the hero ' straw Hat ' with its · D. Luffy to become "sea Thief King" and

Minor issues encountered when text-overflow: ellipsis overflow is used to display ellipsis. text overflow shows ellipsis. I am just an intern. I am writing something for the first time. I hope you will encourage me a lot. In the project, it is not difficult to display titles that exceed a certain length in the form of ellip