文字のオーバーフローを非表示にする問題やflexとの競合に関する問題

2020年8月3日#css20

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

slug: 6 title: 文字溢出隐藏以及和flex冲突的问题 date: 2020-08-03 21:08:00 updated: 2021-11-29 11:50:50 categories: 技术 tags: css 在某些段落中，页面要求文字只显示一行，但是width固定，而文字过长，就会出现一个需求，超过长度限制的文字被隐藏且显示省略号，css 支持这样的属性。单行文本溢出隐藏 div{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 多行文本溢出隐藏 div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 简单的几行代码就可以达到我们的要求。但是有一个我们需要注意的地方！！ flex布局是前端写代码经常使用的一种布局方式，简单便捷且有效，但是在使用flex布局的元素中不能同时使用文字溢出隐藏,也就是两者不能同时出现在同一标签中。这里，我们也有对应的解决办法。只要保证flex布局和隐藏的样式不在同级元素中就可以，所以在文字外部多包裹一层标签。可以采用下面这段代码的写法；

特定の段落では、テキストが 1 行のみ表示される必要がありますが、widthが固定されており、テキストが長すぎると、長さ制限を超えるテキストが非表示になり省略記号が表示される必要があります。CSS はこのようなプロパティをサポートしています。

1 行テキストのオーバーフロー非表示

div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

複数行テキストのオーバーフロー非表示

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

わずか数行のコードで要件を満たすことができます。

ただし、注意する必要があるポイントがあります！

flex レイアウトは、フロントエンドのコーディングでよく使用されるレイアウト方法であり、シンプルで効果的ですが、flex レイアウトを使用している要素では同時にテキストのオーバーフローを非表示にすることはできません、つまり、これら 2 つは同じタグ内で同時に表示されることはできません。

ここで、対応策があります。

flex レイアウトと非表示のスタイルが同じレベルの要素にないことを確認するだけでよく、そのためにはテキストの外側にさらに 1 つのタグを追加します。

以下のコードのように記述することができます；

<p>   
    <!-- ここでflexレイアウトを適用する -->
    <span>  <!-- ここでテキストのオーバーフロー非表示スタイルを適用する -->
        <!-- テキスト -->
    </span>
</p>