web-dev-qa-db-ja.com

テキストオーバーフローの省略記号をFirefoxとchrome

いくつかの記事のキャプションとそのステータスを表示するレイアウトを作成しました。記事名のボックスの幅は固定されており、text-overflow：Ellipsisを使用して長すぎる記事名を切り取っています。また、タイトルとステータスのギャップをより見やすくするために、記事のタイトルの最後に薄い灰色の点線を追加しています（長すぎない場合）。

問題は次のとおりです：Firefoxは、コンテンツ（タイトル+点線のブロック）が長すぎることを認識し、省略記号で切り取ります。同時に、Chromeはそれを実行し、必要に応じて動作します。

スクリーンショット：

enter image description here

私にとっては、Chromeの動作が間違っているように見えますが、それは私にとっては便利です。Firefoxは論理的には正常に動作しています。長すぎる場合はコンテンツをカットします。しかし、なぜですか。コンテナの最後ではなく、テキストの最後でカットしますか（ [〜＃〜] mdn [〜＃〜] によると）？

たぶん私はハックを使っているのかもしれませんが、この場合、私がクロムで行っているように、そのような視覚効果を達成する別の方法を教えてくれれば、私は素晴らしいでしょう。

最小限の例：

HTML：

<p>
    <span class="left-block overflow-Ellipsis">
        Very-very long article name, that would not fit in container
        <span class='dots'></span></span>
    <span class="right-block">
        Published
    </span>
</p>
<p>
    <span class="left-block overflow-Ellipsis">
        Not so long article name
        <span class='dots'></span>
    </span>
    <span class="right-block">
        Unpublished
    </span>
</p>

CSS：

body
{
    background-color:white;
}

span.left-block {
    display:inline-block;
    width: 300px;
    border: 1px solid white;

    white-space: nowrap;
    overflow: hidden;
    vertical-align:top;
}

span.left-block:hover
{
    display:inline-block;
    border:1px solid red;
}

span.right-block
{
    display:inline-block;
    vertical-align:top;
}

.dots
{
    display:inline-block;
    border-bottom:1px dotted #ddd;
    width:300px;
}

.overflow-Ellipsis {
    text-overflow: Ellipsis;
}

遊ぶJsFiddle： https://jsfiddle.net/ka4scx1h/3/

OS：Windows 7 SP1 x64

Chromeバージョン：57.0.2987.133（64ビット）

Firefoxバージョン：51.0.1（32ビット）

よろしくお願いします。

htmlcssgoogle-chromefirefoxellipsis
7
MihanEntalpo

レイアウトを変えるだけで、自分で解決策を見つけました。 LGSonによって書かれた答えは、ソリューションのIE互換性を損なうため、十分ではありません。私の方法は非常に単純で、今まで見つけられなかったのは不思議です。

1）内部テキスト（記事のタイトル）をインラインブロックにラップしました<span class = 'text-block'>

2）追加されたスタイル 'max-width：100％; display：inline-block; 'およびクラス「オーバーフロー-省略記号」をこのスパンに

3）クラス 'overflow-Ellipsis'を外部ブロック（.left-block）から削除しました

4）追加されたスタイル '空白：nowrap;オーバーフロー：非表示; display：inline-block; '、. left-block、.text-blockに追加されたもの

そして、すべてが今うまくいくようです！

body
{
  background-color:white;
}

span.left-block {
  display:inline-block;
  width: 300px;
  border: 1px solid white;
  white-space: nowrap;  
  vertical-align:top;
  overflow: hidden;
}

span.text-block
{
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  max-width:100%;
  
}

span.left-block:hover
{
  display:inline-block;
  border:1px solid red;
}

span.right-block
{
  display:inline-block;
  vertical-align:top;
}

.dots
{
  display:inline-block;
  border-bottom:1px dotted #ddd;
  width:300px;
}

.overflow-Ellipsis {
  text-overflow: Ellipsis;
}
<p>
<span class="left-block"><span class='text-block overflow-Ellipsis'>Very-very long article name, that would not fit in container</span><span class='dots'></span></span>
<span class="right-block">
Published
</span>
</p>
<p>
<span class="left-block"><span class='text-block overflow-Ellipsis'>Not so long article name</span><span class='dots'></span></span>
<span class="right-block">
Unpublished
</span>
</p>

JsFiddleと結果： https://jsfiddle.net/ka4scx1h/6/

私の問題について考えようとしたすべての人に感謝します:)

2
MihanEntalpo

Firefoxのバグ、または異なる動作のようです。

回避策として、またtext-overflow: Ellipsisはブロック要素でのみ機能するため、flexboxをテキストとドットの両方の折り返しと組み合わせて、テキスト要素にdisplay: blockを含めることができるようにしました。

body {
  background-color: white;
}

span.left-block {
  display: inline-flex;
  width: 300px;
  border: 1px solid white;
  vertical-align: top;
}
span.left-block > span:first-child {
  display: block;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
}

span.left-block:hover {
  border: 1px solid red;
}

span.right-block {
  display: inline-block;
  vertical-align: top;
}

.dots {
  flex: 1;
  border-bottom: 1px dotted #ddd;
}

.overflow-Ellipsis > span:first-child {
  text-overflow: Ellipsis;
}
<p>
  <span class="left-block overflow-Ellipsis"><span>Very-very long article name, that would not fit in container</span><span class='dots'></span></span>
  <span class="right-block">
Published
</span>
</p>
<p>
  <span class="left-block overflow-Ellipsis"><span>Not so long article name</span><span class='dots'></span></span>
  <span class="right-block">
Unpublished
</span>
</p>
2
LGSon
div, p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
  -o-text-overflow: Ellipsis;
  -ms-text-overflow: Ellipsis;
  -moz-binding: url('Ellipsis.xml#Ellipsis');
  display: block;
}
<div>
The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the Paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
</div>

<p>
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
</p>
0
Nikit Barochiya