Use CSS to control the title character overflow, represented by an ellipsis

The CSS controls the list of articles so that the text that overflows the title behaves in an elliptical way.


<div style= "width:300px; height:22px;line-height:22px; White-space:nowrap;text-overflow:ellipsis; Overflow:hidden; " > test the effect to see if we can achieve a confession, a confession, a precious confession, a rare extract, and a case of the potato, and then the National Dome </div>





with the above code can be implemented, but if you want to achieve the effect of the combination of multiple CSS definition can be achieved.


below let's look at the definition of each CSS inside:





Text-overflow:clip | Ellipsis


Value:


Clip: Default value. Do not show ellipsis (...), but simple trim


ellipsis: Displays an ellipsis (...) when text overflows inside an object





Description:


Sets or retrieves whether an ellipsis (...) is used. Indicates an overflow of text within an object.


This property only acts on the horizontal inline direction of the ordinary Western text overflow. Inline overflow occurs when the text within a row exceeds the available width but does not have a newline opportunity.


to force an overflow to occur and apply the ellipsis value, the author must set the object's White-space property value to nowrap.


If there is no line-breaking opportunity (for example, the width of the object container is narrow and there are long lines of text without reasonable breaks), it is possible to overflow without an application nowrap.


in order for the ellipsis value to be applied, this property must be set to an object with an unreachable region. The best option is to set the overflow property to hidden. This property is also applied when setting the overflow property to scroll or auto. But there will be scroll bars appearing.


By selecting an ellipsis, hidden text can be selected. When the selection occurs, the ellipsis is hidden and replaced by the text.


This property provides an efficient way to make ellipsis tags in DHTML.


This property is read-only for Currentstyle objects. is writable for other objects.


the corresponding script feature is Textoverflow.


<------------------------------------------------------------------------------------------------------- ---------------->


See the other two attributes mentioned in the above text are expressed in red, this attribute value is only corresponding to the Western text set ...





white-space version: CSS1 compatibility: ie5.5+ ns4+ Inheritance:


Syntax:


White-space:normal | Pre | NoWrap Value:


Normal: Default value. The default processing method. Text is automatically processed for line wrapping. If you reach the container boundary, the content will go to the next line


Pre: newline and other whitespace characters will be protected. This value needs ie6+ or! DOCTYPE declared as Standards-compliant mode support. If! DOCTYPE declaration is not specified as Standards-compliant mode, this property is available, but does not work. The result is equivalent to normal. See Pre Object


nowrap: Forces all text to be displayed in the same line until the text ends or the BR object is encountered. See NoWrap Properties





Description:


Sets or retrieves how the space characters within an object are handled.


Whitespace characters, like newline, spaces, TAB, are ignored by default in HTML documents. When this property is set to Normal or nowrap, you can add a space by using a named entity that does not break the line space and use a BR element to add a newline. This property affects the content you use for the Document Object Model (DOM) operation as it does for IE display content.


This property acts on a block object. This property is read-only for Currentstyle objects. is writable for other objects.


the corresponding script feature is whitespace.





overflow version: CSS2 compatibility: ie4+ ns6+ inheritance: no


Syntax:


overflow:visible | Auto | Hidden | Scroll


Value:


visible: Default value. does not cut content nor does it add scroll bars. If you explicitly declare this default value, the object will be trimmed with the size of the window or frame that contains the object. and the Clip property setting will fail


Auto: Object content is trimmed or displayed with scroll bars when required


Hidden: Do not display content that exceeds the size of the object


Scroll: Scroll bars are always displayed





Description:


retrieves or sets how content is managed when the content of the object exceeds its specified height and width.


the default value for all objects is visible, except for the textarea object and the body object's default value is auto. Setting the TextArea object This property value is hidden hides its scroll bar.


for table, if the Table-layout property is set to fixed, the TD object supports overflow attributes with default values of hidden. If set to scroll or auto, the content that exceeds TD size will be cut. If set to visible, it causes extra text to overflow to the right or left (depending on the direction property setting) cell.


from IE5, this property is available on the Mac platform.


starting from IE6, when you use! The DOCTYPE declaration specifies the standards-compliant mode, which can be applied to HTML objects.


the corresponding script feature is overflow.





The above problem is resolved. But in a call containing a link. But there is no effect. After looking at the code carefully, I found that in the. If the attribute of a in the div is invalidated ...


Since then put the value defined on the Li above to a ... The result is ok ...





The final code is as follows:


<style type= "Text/css" >


ul,li{padding:0; margin:0; list-style:none;}


li{width:95%;margin:0 Auto; height:22px;line-height:22px;}


Li A{white-space:nowrap;text-overflow:ellipsis; overflow:hidden; display:block; width:100%;}


</style>





< div style= "width:300px; padding:5px; " >


< ul>





< Li><a href= "#" > this is False word this is False word this is false word this is fake word this is false words </a></li>


< Li><a href= "#" > this is False word this is False word this is false word this is fake word this is false words </a></li>


< Li><a href= "#" > this is False word this is False word this is False word this is False word this is false word </a></li>


< Li><a href= "#" > this is False word this is False word this is false word this is fake word this is false words </a></li>


</ul>


</div>