CSS 2 text ⑤

In the actual design process, in order to layout the good-looking, such as the above line of words, often have such a demand, when not put down, we will let it show

So this ....  How do you do it with CSS? We can use Text-overflow.

Text-overflow

Text-overflow:clip | Ellipsis

Clip: Default value

Ellipsis: Ellipsis

　　

Overflow:hidden; When the overflow is cut off, if there is no this, the overflow when not cut off, the text-overflow will not work

White-space:nowrap: If you do not write this, then he will automatically change the line, will not achieve this effect

So we must write with these two values when we write Text-overflow:ellipsis.

　　

|

|

| The effect is like this

|

| We want the mouse to move to the style on the button like this

|

　　　　　　　　　　　　　　　　

|

| But it's actually like this.

　　　　　　　　　　　　　　　　

So what do we do? We can use the cursor to define its mouse shape.

These small ones are infrequently used and can be ignored

　　　　　　　　<uri>*: You can customize a picture and the URL can be written multiple

Auto: Automatic processing may move to a hyperlink when he is a mouse hand type

Default: Normal cursor

None: Mouse disappears

Help: Mouse with a say hello

Pointer: Mouse Hand type

Zoom-in: Magnifying Glass

Zoom-out: Narrow Mirror

Move: There will be arrows that go up and down on both sides of the arrow, and we'll use this when we move some elements.

　　　　　　

　　　　　　　

Cursor:pointer; Show a hand type

Cursor:url (xx.cur), pointer; Using a custom button style, followed by a self-styled hand, if the custom style picture is out of the question, it will use its own style, equivalent to a spare

　　　　　　

Forced inheritance

Inherit

　　　　

　　　　　　　　

　　　　　　　　

CSS 2 text ⑤