方法: まず、「overflow:hidden」ステートメントを使用して、制限を超えた後にコンテンツが非表示になるように設定します。次に、「text-overflow:ellipsis」ステートメントを使用して、コンテンツがコンテンツとして表示されるように設定します。制限を超えた場合は省略記号を使用し、最後に "white-space:nowrap" ステートメントを使用して、改行なしでテキストを設定するだけです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
新しい HTML ページを作成し、HTML コード ページで
タグを見つけ、 タグ内に
タグを作成し、表示されるコンテンツを入力してクラス class を追加します。クラス = "続き" として。
タグを見つけて、このタグの下に <style> タグを作成し、<style> タグ内の class cont を使用して、それを超えた後に非表示になるスタイル コンテンツを設定します。 <pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
}
</style>
</head>
<body>
<p class="cont">
订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p>
</body>
</html></pre><p>コードを保存し、ブラウザを使用して HTML ファイルを開いて効果を確認すると、コンテンツの高さが設定されていないため、コンテンツが非表示になっていないことがわかります。 <p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="CSSで省略記号の外にテキストを設定する方法"/>#内容を 1 行で表示するように設定します。内容がそれを超える場合は省略記号で表示されます。 cont クラスにコンテンツを追加すると、white-space: nowrap; のように 1 行で表示され、それを超えた後のコンテンツは text-overflow: ellipsis; のように省略記号で表示されます (注:white-space: nowrap; と text-overflow : 省略記号; 表示するには同時に使用する必要があります。は省略記号です)。 <p><pre class="brush:js;toolbar:false"><style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号 */
white-space: nowrap;/* 文本不进行换行 */
}
</style></pre>コードを保存した後、ブラウザーを使用してコードを開き、内容が制限を超えているかどうかを確認し、省略記号が表示されます。 <p><p><img src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png" title="1618897808567717.png" alt="CSSで省略記号の外にテキストを設定する方法"/> 推奨学習: <p>css ビデオ チュートリアル<a href="https://www.php.cn/course/list/12.html" target="_blank"></style>
以上がCSSで省略記号の外にテキストを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
