CSS学习(十一)-CSS文本溢出_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:24:40
Original
889 Leute haben es durchsucht

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

二、实践:

1.

    <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>    <div class="text-overflow-clip1">        我就是来看一下是不是这里有好吃的。如果没有我就再换个地方找。    </div>    <div class="text-overflow-clip2">        我又换了一个地方,果然找到好吃的了。开心。    </div>
Nach dem Login kopieren
2.

    <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><div class="block" style="text-overflow:ellipsis;">    <span>          零食有五份    </span>   <ol>       <li style="text-overflow:ellipsis;">           这里是一碗汤       </li>       <li style="text-overflow:clip;">           米饭三碗在这边       </li>   </ol>
</div>
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!