改行を超えたCSSテキストを実現する方法

CSS テキストが改行を超える

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

1. テキストの折り返し

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

1. word-wrap

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

2. word-break

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

次は例です:

.container {
    width: 200px;
    height: 100px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.text {
    word-wrap: break-word;
    word-break: break-all;
}

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

2. テキストの切り詰め

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

1. overflow

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

2. text-overflow

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

3. white-space

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

以下は例です:

.container {
    width: 200px;
    height: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text {
    width: 100%;
}

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

上記はCSSテキストが改行を超えてしまった場合の解決策です。実際の開発プロセスでは、実際のニーズに応じて適切な属性を選択して、最良の結果を達成できます。

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