text-overflow の使用時に発生する小さな問題: ellipses_html/css_WEB-ITnose を表示するための省略記号のオーバーフロー テキスト

インターンシップを始めたばかりで、初めて何かを書くのですが、励ましていただければ幸いです。

プロジェクトでは、タイトルが一定の長さを超える場合、省略記号の形で表示する必要があります。これは難しい問題ではありません。しかし、js を使用して実装したくなかったので、Baidu で検索したところ、text-overflow: ellipsis; を見つけました (実際にはかなり前から存在していましたが、私はこれまで知りませんでした)。 style はこの効果を実現でき、すべての主要なブラウザは text-overflow 属性をサポートします。

そこで、次のコードを使用しました

.ellipsis{    width:300px;    white-space: nowrap;    word-break: break-all;    overflow: hidden;    text-overflow: ellipsis;}

しかし、エフェクトに少し問題がありました

この問題は私を困惑させました、そして私はfloat:left;を追加してみました、それはより良くなりました

text-overflowとfloatは互いに何の関係もないはずだと思います。私はdisplay:block、display:inline-blockを試してみましたが、それが機能することがわかりました。

もう一度Baiduにアクセスして、それを使用していることがわかりました。 text-overflow : ellipsis は適用される要素の幅を設定する必要がありますが、インライン要素の幅を直接設定することはできず、 タグを使用します。なぜ float:left でそのような効果が得られるのかというと、 float を使用した後に inline 要素がブロック要素になるためです。 display:block を追加しても効果は同じになるため、この状況に遭遇した場合は要素を設定するだけです。ブロック要素に表示されます。