दीर्घवृत्त (16.0.2), लेकिन नहीं में क्रोम (22.0.1229.94)

Question

मैं निम्नलिखित एचटीएमएल:

<div class="x"> 
    <div class="y" title="aaaaa"> 
     <a href="/"> 
      aaaaa 
     </a> 
    </div> 
    <div class="y" title="bbbbbb"> 
     <a href="/"> 
      bbbbbb 
     </a> 
    </div> 
    <div class="y" title="ccccc"> 
     <a href="/"> 
      ccccc 
     </a> 
    </div> 
    <div class="y" title="dddddddd"> 
     <a href="/"> 
      dddddddd 
     </a> 
    </div> 
</div> 

सीएसएस के साथ

:

.x{ 
    width: 10em; 
    background-color: #FFB9B9; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.y { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 18px; 
    font-weight: bold; 
    line-height: 18px; 
    white-space: nowrap;  
    background-color: #E1CECE; 
    display: inline-block; 
} 

जो आप कर सकते हैं यहां देखें: http://jsfiddle.net/fDBbm/

इलिप्सिस ने फ़ायरफ़ॉक्स (16.0.2) में शुरुआत से ही काम किया लेकिन क्रोम में नहीं (22.0.122 9.9 4)।

Answer 1

यह एक बग है जो display:inline-block और text-overflow: ellipsis का उपयोग करने से उत्पन्न होती है। दुर्भाग्य से क्रोम एक साथ जोड़े/उपयोग किए जाने पर गुणों को सही ढंग से संभाल नहीं करता है।

बग कुछ महीने पहले सूचना मिली थी: http://code.google.com/p/chromium/issues/detail?id=133700

Answer 2

समाधान के लिए आप display:inline-block;

FIDDLE

हालांकि के बजाय display:inline इस्तेमाल कर सकते हैं, यह करने के लिए अलग-अलग 'y' तत्वों का कारण बनता है उनके पृष्ठभूमि रंग खोना ...

तो इसे ठीक करने के लिए हम जोड़ सकते हैं:

.y:after { 
    content: ''; 
    display: inline-block; 
} 

FIDDLE

अब यह एफएफ और क्रोम में काम कर रहा है (और Btw, IE के साथ-साथ)।