CSS学习（十一）-CSS文本溢出

最新推荐文章于 2024-07-25 14:45:45 发布

bwshqh

最新推荐文章于 2024-07-25 14:45:45 发布

阅读量1.6k

点赞数

分类专栏： css css学习文章标签： css css3 class

本文链接：https://blog.csdn.net/bwshqh/article/details/50851164

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

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

二、实践：

<!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>

<!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>