CSS Learning (11)-CSS text Overflow

CSS Learning (11)-CSS text Overflow
I. theory:
1. text-overflow
A. clip does not display the omitted mark
B. ellsis ipdisplay omission mark

Ii. Practice:

1.

<meta charset="UTF-8" /><title></title><style type="text/css">.text-overflow-clip1{            width: 80px;            padding: 10px;            border: 1px solid #ccc;            text-overflow: clip;        }        .text-overflow-clip2{            width: 80px;            padding: 10px;            border: 1px solid #ccc;            text-overflow: clip;            white-space: nowrap;            overflow: hidden;        }</style>

I just want to see if it is delicious. If I don't have one, I can find another place. I changed a place and found delicious food. Happy. 2.

<meta charset="UTF-8" /><title></title><link href="http://www.w3cplus.com/demo/css3.base.css" media="all" rel="stylesheet" type="text/css" /><style type="text/css">.block{            white-space:nowrap;            width:12em;            overflow:hidden;            border:1px solid #000000;            width:60px;            line-height: 20px;            border:1px solid #fc9;        }        .block ol{            padding-left: 23px;            width: 14em;            background: url(images/2-11-test.jpg) no-repeat 2px 4px;        }        .block li{            clear: both;            margin: 0;            padding: 0;            list-style: none outside none;            width: 30px;            overflow:hidden;            white-space:nowrap;        }        .block li a{            float: left;            _display:inline;            max-width: 14em;            white-space: nowrap;            _white-space:normal;            _height:20px;            overflow: hidden;            text-overflow: ellipsis;            -o-text-overflow: ellipsis;            color:#333;            _background:transparent;        }        .block li span{            _position:relative;            float:left;            _display:inline;            margin-right: -99px;            padding-left: 10px;            font-size: 10px;            color:#999;        }</style>

Here is a bowl of soup.

<Ul> <li style = "text-overflow: clip;"> three bowls of rice here </li> <li> & nbsp; </li> </ul