CSSの省略記号とパディングを組み合わせた場合の問題の詳細な説明

CSS によるテキストの切り捨て

テキストを自動的に切り捨てるスタイルコードを実装するには、次のコードを検討してください。

.切り捨てテキスト4 {
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  ディスプレイ: -webkit-box;
  -webkit-box-orient: 垂直;
  -webkit-line-clamp: 4;
}

テストには次の HTML スニペットを使用します。

<スタイル>
  .my-div {
    幅: 300ピクセル;
    マージン: 10px 自動;
    背景: #ddd;
  }
</スタイル>
<div class="my-div 切り捨てテキスト-4">
  シャッフルしない方法 - Knuth Fisher-Yates アルゴリズム。著者: Mike James。
  2017 年 2 月 16 日木曜日。単純なアルゴリズムが間違っている場合もあります。
  この場合は...をシャッフルします。言い換えると、配列がスキャンされると要素
  下
</div>

操作効果:

CSS ellipsisによるテキスト切り捨て効果

パディングの問題

テキストコンテナーにpaddingを追加するまではすべて完璧に動作します。

  .my-div {
    幅: 300ピクセル;
    マージン: 10px 自動;
    背景: #ddd;
+ パディング: 30px;
  }
現在の効果

効果は次のようになります:

paddingテキストの切り捨てが解消される

padding要素の内部スペースを占有しますが、この領域の部分は要素内にあるため、 overflow: hiddenの影響を受けません。

解決

line-height

line-height適切に設定されているか、十分に大きい場合は、 paddingをオフセットして、表示範囲から余分な部分を絞り出すという目的を達成できます。

.my-div {
  幅: 300ピクセル;
  マージン: 10px 自動;
  背景: #ddd;
  パディング: 30px;
+ 行の高さ: 75px;
}

line-heightで修正する

すべての場所でこれほど大きな行の高さが必要なわけではないため、この方法はすべてのシナリオに適しているわけではありません。

パディングを置き換える

paddingは、要素のコンテンツとその境界の間、または要素と他の要素の間にスペースを追加することです。ここでは、実際の交換方法を検討します。

たとえば、 margin 。ただし、この例のように要素に背景がある場合は、要素のmargin部分に背景がないため、 marginテストは適用されません。

代わりにborderを使用することもできます。

.my-div {
  幅: 300ピクセル;
  マージン: 10px 自動;
  背景: #ddd;
- パディング: 30px;
+ 境界線: 30px 透明の実線;
}

paddingの代わりにborderを使用する

当然のことながら、それでもまだ限界はあります。つまり、要素自体に独自のborderスタイル要件がある場合、競合が発生します。

コンテンツコンテナから余白を分離する

これは、コンテンツとマージンを 2 つの要素に分離し、1 つの要素をマージンを実装するために専用に使用し、もう 1 つの要素をテキストの切り捨てを実装するために使用されるという、より普遍的な方法である可能性があります。これは簡単に理解できます。コードを見るだけです:

<div クラス名="my-div">
  <div className="切り捨てテキスト-4">
    シャッフルしない方法 - Knuth Fisher-Yates アルゴリズム。著者: Mike
    ジェームズ。2017年2月16日木曜日。時には単純なアルゴリズムが
    間違いです。この場合は...をシャッフルします。言い換えると、配列がスキャンされるときに
    下の要素
  </div>
</div>

私たちのスタイルはそのままでいいのです。