ホームページ > 記事 > ウェブフロントエンド > CSSの余分なテキストを非表示にして省略記号に置き換える方法
CSSの余分なテキストを非表示にして省略記号に置き換える方法
- 清浅オリジナル
- 2018-11-24 15:51:086174ブラウズ
余分なテキストを非表示にして省略記号に置き換える CSS の実装方法: まず HTML サンプル ファイルを作成し、次に本文にテキスト コンテンツを入力し、最後に「overflow:hidden」と「」を使用して非表示にします。 text-overflow" 属性 パーツに楕円を追加するだけです。
html code
p{
width:300px;
height:30px;
border: 1px solid #ccc;
text-align: center;
font-size: 12px;
line-height:30px;
}
</style>
</head>
<body>
<p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!
php从入门到精通,一站式php自学平台!</p>
##text-overflow 属性
テキストが含まれる要素をオーバーフローした場合の動作を指定します。これは CSS3 のプロパティです。
clip: テキストをトリミングし、余分な部分を削除しますtext-overflow:clip; overflow:hidden; white-space:nowrap;规定段落中的文本不进行换行
##ellipsis: 省略記号を使用して削除されたコンテンツを置き換えます
# #text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
マウスを置くと隠された単語が表示されます
overflow:visible;
概要:以上がこの記事の全内容ですので、皆様のお役に立てれば幸いです。
以上がCSSの余分なテキストを非表示にして省略記号に置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。