यह अधिकतम-चौड़ाई के साथ ऐसा व्यवहार क्यों करता है: 0?

देखें http://jsfiddle.net/mpx7os95/14/यह अधिकतम-चौड़ाई के साथ ऐसा व्यवहार क्यों करता है: 0?

व्यवहार वांछित व्यवहार है, जो उपलब्ध सभी जगह लेने के लिए और अभी भी जब काफी दूर तक सिकुड़ अंडाकार में ऊपर जाने का इसके अंदर पाठ के लिए अनुमति देने के लिए एक 3 कॉलम लेआउट में केंद्र स्तंभ अनुमति देता है। ऐसा लगता है कि max-width: 0 के कारण काम करता है, लेकिन क्यों यह इस प्रभाव का उत्पादन करता है?

इस मामले में max-width: 0 के बारे में इतना खास क्या है?

.row { 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.col { 
 
    position: relative; 
 
    min-height: 1px; 
 
    border: 1px #000 solid; 
 
    display: table-cell; 
 
} 
 
.x { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    width:100%; 
 
    max-width: 0; 
 
}

<div class="row"> 
 
    <div class="col">abc</div> 
 
    <div class="col x">test blah blah blah blah blah zzzzz.</div> 
 
    <div class="col">def</div> 
 
</div>

स्रोत

2014-10-10 Lonimor

नोट: यह नहीं है सिर्फ max-width:0, यह किसी भी चौड़ाई पाठ सामग्री की चौड़ाई की तुलना में कम है।

display: table-cell, max-width का मिश्रण, और width:100% एक दिलचस्प स्थिति बनाते हैं कि विनिर्देश स्पष्ट रूप से कवर नहीं होते हैं। हालांकि, कुछ अवलोकन और सोच करके, हम समझ सकते हैं कि हमारे पास सभी प्रमुख ब्राउज़रों में एक ही व्यवहार क्यों है।

max-width:0 तत्व चौड़ाई 0 बनाने का प्रयास करता है, जिसका अर्थ है कि सब कुछ अतिप्रवाह होना चाहिए। हालांकि, display: table-cell और width:100% का संयोजन, जैसा कि the linked demo में देखा गया है, अधिकांश भाग के लिए div (शायद उसी कारण से max-width does not apply to table rows) के लिए उस आदेश को ओवरराइड करें। इस प्रकार, तत्व max-width:0 के बिना खुद को प्रदर्शित करता है जब तक div की चौड़ाई सभी टेक्स्ट सामग्री को शामिल करने के लिए पर्याप्त नहीं है।

जारी रखने से पहले एक बात ध्यान में रखना है कि डिफ़ॉल्ट रूप से पाठ की चौड़ाई एक चौड़ाई है जो इसके अंदर के पात्रों द्वारा निर्धारित की जाती है। यह माता-पिता div का एक बाल तत्व है, हालांकि कोई टैग नहीं है।

टेक्स्ट सामग्री की यह सहज चौड़ाई प्रभाव बनाने के लिए max-width:0 की आवश्यकता है। एक बार जब div की चौड़ाई नहीं रह गया है इतना बड़ा सामग्री के सभी शामिल करने के लिए है, max-width:0 संपत्ति पाठ सामग्री की चौड़ाई की तुलना में कम हो जाते हैं चौड़ाई में सक्षम बनाता है, लेकिन पाठ जो अब फिट div के अतिप्रवाह बनने के लिए कर सकते हैं बलों अपने आप। इस प्रकार, चूंकि div में अब टेक्स्ट ओवरफ़्लो है और text-overflow: ellipsis सेट है, टेक्स्ट ओवरफ़्लो इलिप्स किया गया है (यदि यह एक शब्द है)।

यह हमारे लिए बहुत उपयोगी है क्योंकि अन्यथा हम बिना किसी गन्दा जावास्क्रिप्ट के इस प्रभाव को नहीं बना सके। Use case demo

_{नोट: यह जवाब व्यवहार का वर्णन करता है और क्यों यह मामला है के रूप में कुछ जानकारी मिलती है। इसमें शामिल नहीं हैdisplay:table-cellmax-width के प्रभाव का हिस्सा ओवरराइड करता है।}

स्रोत

2014-10-10 06:43:16

यह मैंने देखा है, लेकिन मुझे इतना जादुई लग रहा था कि मुझे लगा कि मुझे बेहतर समझ की आवश्यकता है ... विशेष रूप से टेबल-सेल अधिकतम चौड़ाई और चौड़ाई के बीच संबंधों को कैसे प्रभावित करता है, क्योंकि [एमडीएन] (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) कहता है कि अधिकतम-चौड़ाई चौड़ाई से अधिक प्राथमिकता लेती है। मुझे कुछ दस्तावेज़ या चश्मे देखना पसंद आएगा जो इसे समझाते हैं। – Lonimor

@Lonimor संभावित रूप से ऐसा हो सकता है क्योंकि ['अधिकतम चौड़ाई' तालिका पंक्तियों पर लागू नहीं होती है] (http://www.w3.org/TR/css3-box/#property) - शायद यह तालिका कक्षों के लिए समान है ? –

मैं @Lonimor से सहमत हूं, मैं डॉक्स या चश्मे देखना चाहता हूं जो –

यह एक पूर्ण उत्तर नहीं है, बल्कि एक योगदान है।

इस मामले में अधिकतम-चौड़ाई: 0 के बारे में इतना खास क्या है?

मुझे यकीन नहीं है, लेकिन सेल समायोजित करने का एक और मौका देता है। (शायद this, एल्गोरिदम बिंदु 2)

मेरे प्रयोगों के अनुसार केवल आंतरिक चौड़ाई वाले तत्वों को प्रतिस्थापित किया जाता है। इस मामले में टेक्स्ट ब्लॉक में आंतरिक-चौड़ाई वाली सफेद-चौड़ाई है: अब्रैप। आंतरिक चौड़ाई बिना

आइटम अधिकतम-चौड़ाई का उपयोग किए बिना अच्छी तरह से फिट: 0.

http://jsfiddle.net/rnrlabs/p3dgs19m/

* { 
 
    box-sizing: border-box; 
 
} 
 
.table { 
 
    display: table; 
 
    width: 300px; 
 
} 
 
.row { 
 
    width: 100%; 
 
    display: table-row; 
 
} 
 
.col { 
 
    border: 1px #000 solid; 
 
    display: table-cell; 
 
} 
 
.a { 
 
    min-width: 80px; 
 
} 
 
.x { 
 
    background: #0cf; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    width:100%; 
 
} 
 
.y { 
 
    max-width: 0; 
 
} 
 
.z { 
 
    white-space: nowrap; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="col">abc</div> 
 
     <div class="col x"> 
 
      <img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidth" /> 
 
     </div> 
 
     <div class="col">end</div> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="row"> 
 
     <div class="col">abc</div> 
 
     <div class="col x y"> 
 
      <img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidthPlusMaxWidth" /> 
 
     </div> 
 
     <div class="col">end</div> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="row"> 
 
     <div class="col">abc</div> 
 
     <div class="col x z">Intrinsic Width due white-space property set to nowap.</div> 
 
     <div class="col">end</div> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="row"> 
 
     <div class="col">abc</div> 
 
     <div class="col x y z">Intrinsic Width due white-space property set to nowap and Max-Width</div> 
 
     <div class="col">end</div> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="row"> 
 
     <div class="col">abc</div> 
 
     <div class="col x"><span>IntrinsicWidthduenospacesintextandblahIntrinsicWidthduenospacesintextandblah</div> 
 
     <div class="col">end</div> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="row"> 
 
     <div class="col">abc</div> 
 
     <div class="col x y"><span>IntrinsicWidthduenospacesintextandMaxWidth</div> 
 
     <div class="col">end</div> 
 
    </div> 
 
</div> 
 
<div class="table"> 
 
    <div class="row"> 
 
     <div class="col">abc</div> 
 
     <div class="col x y">Non Intrinsic Width. Inline, non-replaced elements. <strong> Inline, non-replaced elements. </strong> Inline, non-replaced elements.</div> 
 
     <div class="col">end</div> 
 
    </div> 
 
</div>

स्रोत

2014-10-11 05:06:25

इस तथ्य का पहले से ही उल्लेख किया गया था ... –

आप किस तथ्य का जिक्र करते हैं? , –

आपके उत्तर का पूरा उद्देश्य - "मैं स्पष्ट करना चाहता हूं कि अधिकतम चौड़ाई

मुझे लगता है कि ज़ैक Saucier के जवाब पर BoltClock की टिप्पणी - कि व्यवहार अपरिभाषित है - इस तथ्य पर भरोसा करने से बचने का एक अच्छा कारण है कि आज के ब्राउज़र वांछित व्यवहार को प्रदर्शित करने के लिए होते हैं। क्योंकि वे क्या में max-width: 0में इसका मतलब है मामले एक अकादमिक रुचि है

बहुत से लोग (मेरे जैसे) नहीं इस सवाल पर पहुंच जाएगा, लेकिन क्योंकि वे जानना चाहते हैं कि क्या यह है कि हैक का उपयोग करने के लिए अंडाकार पाने के लिए ठीक है चाहता हूँ एक टेबल सेल में पाठ के लिए दिखाएं, और एफडब्ल्यूआईडब्ल्यू मुझे लगता है कि जवाब है: "वास्तव में नहीं"।

एक बेहतर तरीका अंडाकार में काम करने के लिए है कि मामला है, के रूप में this answer में सुझाव दिया <table> तत्व पर "table-layout: fixed" का उपयोग करने के लिए है पाने के लिए।

स्रोत

2017-05-02 08:40:48

यह अधिकतम-चौड़ाई के साथ ऐसा व्यवहार क्यों करता है: 0?

उत्तर

संबंधित मुद्दे