テキストオーバーフロー：クロムで省略記号が機能しない61.0.3163.100

Question

更新後は機能しません。

CSS：

.outer { 
    display:block; 
    width: 100px; 
    padding-top: 6px; 
    font-size: 13px; 
    color: #666; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.inner { display: inline-block } 

//追加セミコロン

<span class="outer"> 
    01 
    <span class="inner">|</span> 
    The first step. 
</span> 

これが実際のコードです。

Answer 1

作業を確認してください。 display:block

div{ 
 

 
    display:block; 
 
    width: 100px; 
 
    padding-top: 6px; 
 
    font-size: 13px; 
 
    color: #666; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 

 
    }

<div>afewfafwfawfawfawfawfawfawfawfawefawfawfawfawfawfawfwafawfawfawfwafawfwaf</div>

Answer 2

.my-elm { 
 
    display:block;  
 
    padding-top: 6px; 
 
    font-size: 13px; 
 
    color: #666; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    width: 50px; 
 
}

<div class="my-elm">This is demo text.</div>