div

Question

<div rownumber="0" messageid="141" class="post" style="position: relative; top: 0px;"> 
    <div class="post_body">testbox</div> 
    <div class="post_info" style="top: 0px;"> 
     <ul> 
      <li class="vote" id="voteli"><a href="#">vote up</a></li> 
      <li class="flag" id="flagli"><a href="#">flag</a></li> 
     </ul> 
    </div> 
</div> 

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

div class="post_body" उपयोगकर्ता संदेश क्या है, वर्तमान में 'testbox' कहता है। अब, मेरे पास जो मुद्दा है, वह है जब कोई उपयोगकर्ता div की चौड़ाई से परे एक संदेश लिखता है, तो यह अभी भी जारी रहता है, यह दूसरी पंक्ति पर टक्कर नहीं देता है।

यहाँ दो बातें मैं हासिल करना चाहते है:

1. मुझे यकीन है कि जब पाठ क्षैतिज फिट नहीं करता है बनाना चाहते हैं, यह एक ही div के भीतर दूसरी लाइन पर चला जाता है।
2. यदि मैं post_body div की ऊंचाई हर समय लगातार रह सकता हूं तो मुझे टेक्स्ट को छोटा करना है यदि उसे दो पंक्तियों पर जाना है।

मैं यह कैसे कर सकता हूं?

धन्यवाद!

Answer 1

कोई और नहीं कर रहा है, इसलिए मैं करूँगा।

मैंने इसका उपयोग किया जो टिप्पणियों में कहा गया था और यह काम करता है।

Auto-size dynamic text to fill fixed size container

Answer 2

आप केवल सीएसएस का उपयोग कर सकते हैं और div की चौड़ाई को एक विशिष्ट राशि में सेट कर सकते हैं। जब पाठ DIV टैग की चौड़ाई फिट करने के लिए बड़ा हो जाता है तो यह बस लपेट जाएगा।

फ़ॉन्ट आकार को समायोजित करने के लिए आपको जावास्क्रिप्ट के साथ पागल होना होगा। व्यक्तिगत रूप से मैं सिर्फ डीवी टैग को ऊंचाई निर्धारित करता हूं और सीएसएस ओवरफ्लो-वाई को ऑटो पर सेट करता हूं, जो डीवी टैग आयामों को फिट करने के लिए बहुत अधिक टेक्स्ट होने के बाद div को स्क्रॉल करने का कारण बनता है

Answer 3

ऐसा लगता है मेरे लिए काम कर रहा है:

<div rownumber="0" messageid="141" class="post" style="position: relative; top: 0px;">  
    <div class="post_body" style="width:100px; overflow:scroll; ">testbox. this is a test. this is a test. this is a test.</div>  
    <div class="post_info" style="top: 0px;">   
    <ul>    <li class="vote" id="voteli"><a href="#">vote up</a></li>    <li class="flag" id="flagli"><a href="#">flag</a></li>   </ul>  

    </div> 
</div> 

सुनिश्चित करें कि जब आप अपना div उत्पन्न करते हैं तो आप इसे चौड़ाई और अतिप्रवाह के साथ एक शैली विशेषता देते हैं।

Answer 4

उपयोग इस कोड ओवरफ़्लो- रैप: तोड़-शब्द;