CSS学习(十一)-CSS文本溢出

一、理论:
1.text-overflow 
a.clip 不显示省略标记
b.ellipsis 显示省略标记

二、实践:

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
</head>
<body>
    <div class="text-overflow-clip1">
        我就是来看一下是不是这里有好吃的。如果没有我就再换个地方找。
    </div>
    <div class="text-overflow-clip2">
        我又换了一个地方,果然找到好吃的了。开心。
    </div>
</body>
</html>
2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3.base.css" media="all" />
    <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>
</head>
<body>
<div class="block" style="text-overflow:ellipsis;" >
    <span >
          零食有五份
    </span>
   <ol>
       <li style="text-overflow:ellipsis;">
           这里是一碗汤
       </li>
       <li style="text-overflow:clip;">
           米饭三碗在这边
       </li>
   </ol>
</div>
</body>
</html>

你可能感兴趣的:(css,Class,css3)