पाठ

के लिए गतिशील अधिकतम चौड़ाई तो मान लें कि मेरे पास यह मार्कअप है;पाठ

<div> 
    <span>Text one</span> 
    <span class="sticky">ABC</span> 
</div> 
<div> 
    <span>Some other text</span> 
    <span class="sticky">DEF</span> 
</div> 
<div> 
    <span>Lorem dolor sit amet lorem ipsum dolor</span> 
    <span class="sticky">GHI</span> 
</div>

जो सीएसएस के साथ - नीचे चित्रित की तरह परिणाम देगा।

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

हालांकि, मैं चाहता हूं कि यह तत्व केवल एक पंक्ति हो। अब, इसे प्राप्त करने के लिए, आप करते हैं;

white-space: nowrap; 
overflow: hidden;

लेकिन तब क्या होता है दूसरा span है, गुमनामी में गायब हो जाता है के रूप में यह पहली span में पाठ की लंबाई से दूर संचालित है।

जो मैं प्राप्त करना चाहता हूं वह नीचे दिए गए तीसरे उदाहरण में चित्रित किया गया है। जब पहली span की सामग्री प्रदर्शित होने के लिए बहुत लंबा है, text-overflow: ellipsis; एक डॉट-डॉट-डॉट के साथ स्ट्रिंग को काट देगा, और दूसरा spandiv अनुमति देने के बहुत दाएं किनारे पर धक्का दिया जाएगा (padding)।

अनिवार्य रूप से, पहले span की छद्म max-widthdiv की चौड़ाई के बराबर होगा, इसकी padding को छोड़कर और span.sticky की चौड़ाई, जो कुछ भी है कि हो सकता है की कटौती (के रूप में यह की सामग्री भिन्न हो सकते हैं, इसलिए चौड़ाई सेट नहीं है)।

मुझे नहीं पता कि max-width वास्तव में ऐसा कुछ करने के लिए जाने का तरीका है, लेकिन मैं जो व्यवहार चाहता हूं उसका सबसे अच्छा वर्णन करने के लिए इसका उपयोग कर सकता हूं।

क्या यह प्राप्त करने का कोई गैर-जेएस तरीका है?

Example

स्रोत

2013-01-07 Emphram Stavanger

यह निश्चित रूप से कर सकते हैं, और सीएसएस में किया जाना चाहिए। पहले अवधि पर एक निश्चित चौड़ाई और निश्चित ऊंचाई लागू करें। ऊंचाई इसे कई लाइनों तक खींचने से रोकती है। तब .sticky अवधि बाद में तैनात किया जा सकता है। यह पर्सेंट या ईएमएस का उपयोग करके द्रव भी बनाया जा सकता है। कुछ विचार करने के लिए, मुझे 'एबीसी', 'डीईएफ' के संदर्भ को नहीं पता है, लेकिन वे बेहतर ढंग से लागू हो सकते हैं: पहले या: छद्म वर्ग के बाद यदि वे पूरी तरह से दृश्यमान हैं और संरचनात्मक तत्व नहीं हैं।

div { 
    width: 200px; /* some amount that you set */ 
} 
span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */ 
    display: inline-block; /* so height and width actually take affect */ 
    max-width: 80%; 
    height: 1em; /* so overflow hidden works and keeps text on one row */ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */ 
} 
span.sticky { 
    display: inline-block; 
    width: 20%; 
}

आप एक जीवित साइट पर इस काम के देखने के लिए चाहते हैं, तो मैं moolta.com पर इस डिजाइन किया:

यहां एक त्वरित उदाहरण है। 'एक चुनौती बनाएं' पर क्लिक करें और एक दोस्त को चुनने के लिए मोडल खोलें। ली ड्रॉपडाउन सूची के अंदर ली है जो मैं बात कर रहा हूं। वे लाइनों

स्रोत

2013-01-08 22:24:52 DMTintner

मैं यह पूरी तरह से गतिशील बनाने के लिए लगता है कि तोड़ने के बिना elipsis हो जाते हैं और एक बटन उनका अनुसरण करने के लिए, था, यह उस dohickey एक छोटी सी जे एस पहले के लिए गणना की वास्तविक 'अधिकतम-width' साथ सुधार किया जा सकता सीएसएस में समान कार्यक्षमता की कमी के लिए 'div' की चौड़ाई और 'चिपचिपा' की वास्तविक सामग्री चौड़ाई के आधार पर' span'। लेकिन यह एक महान शुरुआत है। –

इसे बनाने के लिए चारों ओर झुका हुआ; http://jsfiddle.net/GEzXU/ - इस दृष्टिकोण के बारे में राय का स्वागत है। –

क्या बाहरी div के लिए गतिशील चौड़ाई का उपयोग करके यह काम करने का कोई तरीका है? – crobicha

<html> 
    <head> 
    <style> 
     .left { 
     max-width: 200px; 
     display: inline-block; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     } 

     .right { 
     float: right; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem 
    </div> 
    <br /> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem ipsum 
    </div> 
    <br /> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit 
    </div> 
    </body> 
</html>

स्रोत

2014-03-04 00:38:24

उत्तर

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