0
SVGアイコンに使用される擬似要素::beforeでアンカーを作成しました。 ::beforeがの場合、position: relativeの場合、上/左を使用する場合は負の値、下/右を使用する場合は正の値のいずれかに配置すると、text-overflow: ellipsis機能が中断されます。例えば擬似要素が配置されているとテキストオーバーフローが発生する
a {
display: block;
border: 1px solid blue;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
a::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid red;
position: relative;
}
a.test2::before, a.test3::before {
left: -1px;
}
a.test3::before {
position: absolute;
}<a class="test1">some very long text which overflows</a>
<a class="test2">some very long text which overflows</a>
<a class="test3">some very long text which overflows</a>、テキストが（少なくともクロム61、MacOSの中に）これらの例の各々において省略記号が、第1破断をオーバーフローさせ得るべきです。
macのFirefox 56はではないと思われます。にこの問題があります。
position: absoluteなどを使用すると、問題が解決しますが、の理由がわかりません。これが発生します。
テキストオーバーフローの計算に関連する説明は表示されません。実際の問題は 'body> a 'よりはるかに深いことになります。これは、' body'のマージン/パディングに関係なく再現できるので、含まれる要素は無関係です。私は個人的には既にポジショニングの仕組みを理解していますが、テキスト*が明らかにオーバーフローしているにもかかわらず、テキストオーバーフローがもはや適用されない理由については言及していません。 – helion3
ボックスは、 'position：absolute'のために考慮される親のオフセットであるため、左に配置されます。より深いレベルで階層的な問題がある場合は、親要素に 'position'を指定していないか、' padding'または 'margin'を追加しているためです。あふれていないテキストは、占有スペースと切り詰めようとしている要素のオフセットの両方のクォークであるようです。疑似要素から 'position：absolute'を削除するか、コンテナに' position：relative'を追加して解決してください。 –
私は自分の投稿ではっきりしていないかもしれませんが、私はポジショニングについて質問していません、ポジショニングの仕組みを完全に理解しています。私が持っている唯一の質問に答えると、あなたはそれが "変わったようです"と言っている、それは役に立たない。 – helion3