ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS学習(11) - CSSテキストoverflow_html/css_WEB-ITnose
CSS学習(11) - CSSテキストoverflow_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:24:40933ブラウズ
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 までご連絡ください。