フレックスボックスの項目に省略記号が表示されない

Question

私はtext-overflow: ellipsisをchromeとfirefoxでテストしましたが、両方ともテキストが短くなっていますが、末尾に'...'が表示されません。何が問題なの？

私はmin-width、max-width、flex: 0 1 autoなどのような他の解決策を試してみましたが、どれも動作していないようです。省略記号は表示されません。

これは私のコードです：ここでは

ul { 
    display: flex; 
    height: 40px; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    list-style: none; 
} 
ul li { 
    display: flex; 
    align-items: center; 
    height: 100%; 
    padding: 0 4px; 
    border-bottom: 1px solid #eee; 
} 
ul li:first-child { 
    width: 55px; 
    flex-shrink: 0; 
} 
ul li:first-child input { 
    width: 100%; 
} 
ul li:last-child { 
    width: 48px; 
    flex-shrink: 0; 
} 
ul li:nth-child(2) { 
    flex: 0 1 auto; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    min-width: 0px; 
} 
ul li:nth-child(3) { 
    width: 75px; 
    flex-shrink: 0; 
} 

は、問題を実証するフィドルです：https://jsfiddle.net/dpbejpou/1/

注：私が言ったように私はすでに、このような最小幅として、他のソリューションを使用してみました、max-width（これは既に私のコードにあります）はon this linkですが、コードスチルは機能しません。

Answer 1

text-overflow: ellipsisの場合は、幅を定義する必要があります。 flex-basis: autoがありますが、これでは不十分です。

また、text-overflow: ellipsisはブロックレベルの要素に対してのみ機能します。

フレックスアイテムはblockifiedとみなされ、省略記号が機能します。ただし、フレックスアイテムにdisplay: flexを適用すると、displayプロパティのブロックレベルルールが破損します。

これらの調整試してみてください：テキストを垂直方向に中央に

ul { 
 
    display: flex; 
 
    height: 40px; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    /* display: flex;   <-- remove */ 
 
    /* align-items: center;  <-- will no longer work */ 
 
    height: 100%; 
 
    padding: 0 4px; 
 
    border-bottom: 1px solid #eee; 
 
} 
 
ul li:first-child { 
 
    width: 55px; 
 
    flex-shrink: 0; 
 
} 
 
ul li:first-child input { 
 
    width: 100%; 
 
} 
 
ul li:last-child { 
 
    width: 48px; 
 
    flex-shrink: 0; 
 
} 
 
ul li:nth-child(2) { 
 
    flex: 0 1 100px;    /* adjusted; 100px for demo only */ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    min-width: 0px; 
 
} 
 
ul li:nth-child(3) { 
 
    width: 75px; 
 
    flex-shrink: 0; 
 
}

<ul> 
 
    <li><input type="number" value="1"></li> 
 
    <li>A very long text description goes here</li> 
 
    <li>$99.90</li> 
 
    <li>Del</li> 
 
</ul>

Revised Fiddle

をあなたが前に持っていたように、あなたは、非省略記号要素にフレックスレイアウトを使用することができます。省略記号のテキストを垂直方向に中央に配置するには、try another method。

参考文献：

• Applying an ellipsis to multiline text
• How do I vertically center text with CSS?

Answer 2

をマークアップするために追加この1つのFiddle

スパンをお試しください：

<ul> 
    <li><input type="number" value="1"></li> 
    <li><span>A very long text description goes here</span></li> 
    <li>$99.90</li> 
    <li>Del</li> 
</ul> 

ちょうどこのCSS：

ul li:nth-child(2) span { 
    max-width: 135px; //change it to any max value you like 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Answer 3

liの表示flexプロパティを削除するだけで済みます。デモをチェックしてください。

ul li { 
    align-items: center; 
    height: 100%; 
    padding: 0 4px; 
    border-bottom: 1px solid #eee; 
} 

Demo