CSS におけるテキストのオーバーフローと複数行の省略は、レイアウト設計でよく発生する問題です。この記事では、CSS テキスト オーバーフローと複数行省略記号の実装について紹介します。
目次
1. テキストオーバーフロー
テキスト オーバーフローは、コンテナ内のテキスト コンテンツがコンテナの幅または高さを超えると発生します。CSS でテキスト オーバーフローを実現するいくつかの方法を次に示します。
1.1. 単一行テキストのオーバーフロー省略:
単一行のテキスト オーバーフローの省略は通常、タイトルなどのテキスト表示に使用されます。これは、white-space 属性と text-overflow 属性を設定することで実現できます。
ホワイトスペース属性: 要素内の空白の処理方法を設定するために使用されます。デフォルト値は通常です。つまり、冗長なスペースと改行は自動的に無視されます。nowrap に設定すると、テキストは折り返されません。
text-overflow 属性: オーバーフロー テキストの表示モードを制御するために使用されます。デフォルト値はクリップで、オーバーフロー部分を切り取ります。省略記号に設定すると、省略記号が表示されます。
サンプルコード:
<style>
.overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<div class="overflow">这是一段需要溢出省略的文本内容</div>
1.2. 複数行のテキストのオーバーフロー省略:
複数行のテキスト オーバーフローの省略は、text-overflow プロパティを設定することによっても実現できます。ただし、text-overflow 属性は複数行テキストでは機能しないため、他の属性と組み合わせて実装する必要があります。
-webkit-line-clamp 属性: 表示される行数を制限するために使用されます。
表示属性: コンテナの表示属性を -webkit-box に設定し、ブロックレベルのボックスにするために使用されます。
-webkit-box-orient 属性: ブロックレベルのボックスの配置方向を垂直に設定するために使用されます。
サンプルコード:
<style>
.overflow {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<div class="overflow">这是一段需要溢出省略的多行文本内容，如果文本过长会出现省略号</div>
2、複数行の省略
複数行の省略記号は主に、固定高さのコンテナーでコンテナーの高さを超えるテキストを省略するために使用されます。同様に、単一行のテキスト省略の場合は text-overflow プロパティを使用できますが、複数行の省略を実現するには他のプロパティを組み合わせる必要があります。
2.1、プレーンテキストを使用して達成する
複数行のテキストの省略は、行の高さと高さを調整することで実現されます。
サンプルコード:
<style>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 25px;
height: 50px;
}
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容，如果文本过长会出现省略号</div>
2.2. 擬似要素を使用した実装
複数行テキストの省略記号は、擬似要素を介してテキストの後に省略記号を追加することで実現されます。
サンプルコード:
<style>
.ellipsis::before {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 10px;
background: white;
}
.ellipsis {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 25px;
height: 50px;
}
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容，如果文本过长会出现省略号</div>
要約する
以上がテキストオーバーフローや複数行省略を実現するCSSの手法であり、ニーズに応じて実際の状況に応じて実装方法を選択することができます。実際の開発では、異なるブラウザの互換性に応じて対応する CSS プレフィックスを使用し、異なるプロパティ間の互換性に注意を払う必要があります。