CSS tips (occasionally updated) and css tips are updated on a regular basis

CSS tips (occasionally updated) and css tips are updated on a regular basis

1. ellipsis in Web text

It is common in Web development. That is, the text is too long, and the container of the text is not long enough, and we do not want to wrap the text, so we want to use ellipsis to solve this problem. In today's HTML standards, there are no relevant identifiers or attributes that allow you to simply do this. However, we can use CSS style sheets to do this.

The following is the HTML code:

<div class="text">    <p class="content">        My name is Luka. I come from a town in Jiangxi. I was borned in December,1989. My Chinese Zodiac is snake and my star sign is sagittarius.    </p></div>

We simply set the size of the div element:

.text{ width: 260px;height: 60px;line-height: 60px;background: pink;}

The display result is as follows:

You can use CSS to set ellipsis:

.content {overflow: hidden;white-space: nowrap;width: 100%;text-overflow: ellipsis;}

The effect is as follows:

A simple explanation:

* The overflow attribute is required and must be hidden.

* White-space: nowrap is also required. If the text can be automatically wrapped, there will be no ellipsis even if it is invisible. Because the Text wrap does not exceed the container size, there will be no ellipsis.

* The width attribute is set only when IE6 is supported. Set to 100% only to solve the incompatibility problem of IE6. (For incompatibility issues in IE, see the 9 most common IE bugs and their fix.)

* Text-overflow: ellipsis is used to set ellipsis. Currently, it is not a standard HTML specification. It is introduced by IE and can work on IE6 +, Safari 3.2 +, and Chrome.

 

2. How to center an undefined ul

If you want to center ul with an indefinite width, the number of li is uncertain, and the width of li is uncertain.

It's easy. Don't set float: left for li, but use display: inline and text-align: center.

<! DOCTYPE html> 
The current results are as follows:

We can add some more styles to look good:
ul { background-color: #1a929f;padding: 6px 0;}li a { text-decoration: none; color: #ffffff;padding: 6px;}li a:hover {  text-decoration: underline; }