改行を無効にして CSS での非表示をさらに進める方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

改行を無効にして CSS での非表示をさらに進める方法

藏色散人

Mar 22, 2021 pm 04:00 PM

css

改行を禁止して非表示を超える CSS メソッド: 最初に HTML サンプルファイルを作成し、次に本文にテキストコンテンツを作成し、最後に「white-space」属性と「text-overflow」属性を使用してコンテンツ禁止を実装します。包んで隠すだけ。

改行を無効にして CSS での非表示をさらに進める方法

この記事の動作環境: Windows7 システム、HTML5&&&CSS3 バージョン、DELL G3 コンピューター

CSS では空白を使用できます。属性とオーバーフロー属性を組み合わせて使用すると、テキストは折り返されず、余分な部分は非表示になります。

white-space 属性は、要素内の空白の処理方法を指定します。値が nowrap に設定されている場合、テキストは折り返されず、
タグが終了するまでテキストは同じ行に続きます。遭遇した。

オーバーフロー属性は、コンテンツが要素ボックスからオーバーフローしたときの動作を指定します。値が非表示に設定されている場合、コンテンツはトリミングされ、残りのコンテンツは非表示になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 100px;
border: 1px solid red;
}
.overflow{
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<p>普通文本！！！
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
<p class="overflow">
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>

レンダリング:

改行を無効にして CSS での非表示をさらに進める方法

text-overflow 属性を追加して、余分な部分を非表示にし、省略記号として表示することもできます。

text-overflow 属性は、含まれている要素からテキストがオーバーフローした場合の動作を指定します。属性値は次のとおりです:

clip テキストのトリミング。

ellipsis トリミングされたテキストを表す省略記号を表示します。

string 指定された文字列を使用して、トリミングされたテキストを表します。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 100px;
border: 1px solid red;
}
.text-overflow{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<p>普通文本！！！
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
<p class="text-overflow">
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>

レンダリング:

改行を無効にして CSS での非表示をさらに進める方法

[推奨学習: css ビデオチュートリアル]

以上が改行を無効にして CSS での非表示をさらに進める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。