CSSの余分なテキストを非表示にして省略記号に置き換える方法-CSSチュートリアル-php.cn

CSSの余分なテキストを非表示にして省略記号に置き換える方法

清浅

リリース： 2021-04-22 15:07:29

オリジナル

6234 人が閲覧しました

余分なテキストを非表示にして省略記号に置き換える CSS の実装方法: まず HTML サンプルファイルを作成し、次に本文にテキストコンテンツを入力し、最後に「overflow:hidden」と「」を使用して非表示にします。 text-overflow" 属性パーツに楕円を追加するだけです。

CSSの余分なテキストを非表示にして省略記号に置き換える方法

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

CSS では、テキストが制限を超えた場合、overflow:hidden を使用してテキストを非表示にし、CSS の text-overflow 属性を使用して非表示部分に省略記号を追加できます。この場合、ボックスを超えるコンテンツを非表示にするために overflow:hidden を使用することがよくありますが、今日はこれを使用して記事を非表示にすることができることを説明します。次に、記事で詳しく説明します。

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 属性 Image 18.jpg

テキストが含まれる要素をオーバーフローした場合の動作を指定します。これは CSS3 のプロパティです。

clip: テキストをトリミングし、余分な部分を削除します

text-overflow:clip;
overflow:hidden;
white-space:nowrap;规定段落中的文本不进行换行

ログイン後にコピー

##ellipsis: 省略記号を使用して削除されたコンテンツを置き換えます

# #

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

ログイン後にコピー

Image 16.jpg

マウスを置くと隠された単語が表示されます

overflow:visible;

ログイン後にコピー

Image 17.jpg

概要:以上がこの記事の全内容ですので、皆様のお役に立てれば幸いです。

以上がCSSの余分なテキストを非表示にして省略記号に置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。