SPANタグで自動行折り返しを設定する方法

span タグは、ドキュメント内のインライン要素を結合するために使用されます。スパンには固定フォーマット表現がありません。スタイルを適用すると、視覚的な変化が生じます。コンテンツが長すぎる場合は、overflow:hidden 設定を使用してオーバーフロー部分を非表示にすることができます。ただし、モールの商品情報表示など、一部のアプリケーション シナリオでは、コンテンツが自動的に折り返されることを期待します。 。

ここで使用する必要があるのは、CSS の空白属性です。 White-space 属性は、要素内の空白をどのように処理するかを設定します。関連する属性値は次のとおりです:

通常のデフォルト値。空白はブラウザによって無視されます。
前の空白はブラウザによって保持されます。これは HTML の

 タグのように動作します。 <br>nowrap テキストは折り返されず、<br> タグが見つかるまで同じ行に続きます。 <br>pre-wrap は空白シーケンスを保持しますが、通常どおりラップします。 <br>pre-line は空白シーケンスをマージしますが、改行は保持します。 <br>inherit は、空白属性の値が親要素から継承されることを指定します。 </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal"> 改行を設定するには通常または事前折り返しを使用できます。ここでは、Chanzhi Web サイト構築システムのモール機能をローカルで使用します。 </p>
<p class="MsoNormal" style="text-align: center;"> <img alt="" src="https://img.php.cn/upload/article/000/000/194/6979009b08382c56710359c426836286-0.png">タイトルが長すぎるため、残りは無視され、非表示になります。ここで、タイトルが完全に表示されて自動的に折り返され、価格がタイトルの下に表示されるようにします。バックエンド製品ブロックの CSS ボックス内の CSS コードを通じてスタイルを直接制御します: </p>
<p class="MsoNormal"> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">#blockID p.card-heading span
{
    width: 100% !important;
    float: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

ログイン後にコピー

最後に、最終的な効果と顧客事例を見てみましょう:

以上がSPANタグで自動行折り返しを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。