CSSで省略記号の外にテキストを設定する方法-CSSチュートリアル-php.cn

CSSで省略記号の外にテキストを設定する方法

醉折花枝作酒筹

リリース： 2023-01-05 16:10:00

オリジナル

15907 人が閲覧しました

方法: まず、「overflow:hidden」ステートメントを使用して、制限を超えた後にコンテンツが非表示になるように設定します。次に、「text-overflow:ellipsis」ステートメントを使用して、コンテンツがコンテンツとして表示されるように設定します。制限を超えた場合は省略記号を使用し、最後に "white-space:nowrap" ステートメントを使用して、改行なしでテキストを設定するだけです。

CSSで省略記号の外にテキストを設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

新しい HTML ページを作成し、HTML コードページで

タグを見つけ、タグ内に

タグを作成し、表示されるコンテンツを入力してクラス class を追加します。クラス = "続き" として。

タグを見つけて、このタグの下に <style> タグを作成し、<style> タグ内の class cont を使用して、それを超えた後に非表示になるスタイルコンテンツを設定します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div><p>コードを保存し、ブラウザを使用して HTML ファイルを開いて効果を確認すると、コンテンツの高さが設定されていないため、コンテンツが非表示になっていないことがわかります。 </p><p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="CSSで省略記号の外にテキストを設定する方法"/></p>#内容を 1 行で表示するように設定します。内容がそれを超える場合は省略記号で表示されます。 cont クラスにコンテンツを追加すると、white-space: nowrap; のように 1 行で表示され、それを超えた後のコンテンツは text-overflow: ellipsis; のように省略記号で表示されます (注:white-space: nowrap; と text-overflow : 省略記号; 表示するには同時に使用する必要があります。は省略記号です)。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><style> .cont{ overflow:hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/* 超出内容显示为省略号 */ white-space: nowrap;/* 文本不进行换行 */ } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>コードを保存した後、ブラウザーを使用してコードを開き、内容が制限を超えているかどうかを確認し、省略記号が表示されます。 <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 サイトの他の関連記事を参照してください。