ホームページ  >  記事  >  ウェブフロントエンド  >  CSS学習(11) - CSSテキストoverflow_html/css_WEB-ITnose

CSS学習(11) - CSSテキストoverflow_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:24:40908ブラウズ

1. 理論:
1.text-overflow
a.clip は省略記号を表示しません
b.ellipsis は省略記号を表示します

2. 実践:

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.

りー

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。