CSSテキストが改行を超えています

CSS テキストが行折り返しを超えています

Web デザインでは、テキスト コンテンツが親コンテナーを超える状況によく遭遇します。現時点では、CSS を使用してこの問題を解決する必要があります。 CSS には、行の折り返しやテキストの切り捨てを制御するためのプロパティがいくつか用意されています。この記事では、これらのプロパティの使用法と実際の事例を紹介します。

1. テキストの折り返し

テキストの内容が親コンテナを超える場合、テキストの折り返し方法を制御して、親コンテナ内で自動的に折り返すことができます。一般的に使用される CSS プロパティは次のとおりです。

1. word-wrap

このプロパティは、単語内で改行を許可するかどうかを指定するために使用され、デフォルトは通常です。この属性の値がbreak-wordの場合、単語の長さがコンテナの幅を超えると、単語は自動的に分割されて折り返されます。

2. word-break

この属性は、単語の分割方法を指定するために使用されます。デフォルトは通常です。この属性の値がブレークオールの場合、コンテナの幅を超えない単語であっても分割されます。

以下は例です:

<code class="css">.container {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.text {
    word-wrap: break-word;
    word-break: break-all;
}</code>

<code class="html"><div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会超出容器的宽度，需要我们使用CSS来控制其换行。</p>
</div></code>

2. テキストの切り詰め

テキストを新しい行に折り返す代わりにテキストの長さを制限する必要がある場合は、テキストの切り詰めを使用できます。一般的に使用されるいくつかの CSS プロパティを次に示します。

1. overflow

このプロパティは、親コンテナのコンテンツがコンテナ サイズを超えた場合にどのように動作するかを指定するために使用されます。デフォルトは表示されます。これを非表示に設定すると、コンテンツ以外の部分が非表示になります。また、スクロールに設定すると、スクロール バーが表示されます。

2. text-overflow

この属性は、テキストがオーバーフローした場合の表示方法を指定するために使用されます。デフォルトはクリップです。これを省略記号に設定すると、テキストがオーバーフローしたときに省略記号が自動的に追加されます。

3. white-space

この属性は、要素内の空白の処理方法を制御するために使用されます。デフォルトは通常です。これを nowrap に設定できます。これは、「br」タグが出現しない限りテキストが折り返されないことを意味します。

以下は例です:

<code class="css">.container {
    width: 200px;
    height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text {
    width: 100%;
}</code>

<code class="html"><div class="container">
    <p class="text">这是一段很长很长很长很长很长很长很长的文字，它会被截断并自动加上省略号。</p>
</div></code>

以上が改行を超えるCSSテキストの解決策です。皆様のお役に立てれば幸いです。実際の開発プロセスでは、実際のニーズに応じて適切な属性を選択して、最良の結果を達成できます。

以上がCSSテキストが改行を超えていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。