एचटीएमएल/सीएसएस

Question

में लपेटने में बहुत लंबा शब्द नहीं है, मेरे पास एक समस्या है, जहां कोई उपयोगकर्ता 'cooooooooooooooooooooooooooooooooooooooool' जैसी लंबी टिप्पणी/शब्द दर्ज करना चाहता था, तो यह पृष्ठ पर स्वरूपण को तोड़ देगा।

एचटीएमएल:

<div class="comment-content"> 
    <p>cooooooooooooooooooooooooooooooooooooooool</p> 
    <br /> 
    <a class="delete-comment" data-delete-comment-id="28" href="/">Delete</a> 
</div> 

Css:

यहाँ नीचे एक छवि मदद करने के लिए परिदृश्य (पैमाने पर नहीं) और भी इस्तेमाल किया कोड की व्याख्या है

.comment-content 
{ 
    width: 525px; 
    margin: 13px 25px 0 0; 
} 
.comment-content p 
{ 
    width: 525px; 
} 

मुझे आश्चर्य है कि इसके लिए बहुत अधिक मार्कअप और सीएसएस को बदले बिना त्वरित फिक्स है क्योंकि यह कोड का क्षेत्र है, हम एप्लिकेशन कोड (एएसपी.नेट/एमवीसी 3 में लिखे गए) को बदलकर बग पेश नहीं करना चाहते हैं।

यदि सीएसएस/एचटीएमएल एक विकल्प नहीं था, तो मुझे लगता है कि एचटीएमएल 5 <wbr> टैग का उपयोग 'एक्स' अक्षरों के बाद शब्द को अलग करने के लिए किया जा सकता है - इसके साथ एकमात्र मुद्दा यह है कि वेबसाइट 9 भाषाओं में बहुभाषी है। उदाहरण के लिए जापानी और चीनी पाठ वर्ण काफी बड़े होते हैं, फिर अंग्रेजी पाठ वर्ण जिन्हें <wbr> जोड़ने से पहले चरित्र गणना प्राप्त करने के लिए कई सशर्त कोड की आवश्यकता होती है या फ़ॉन्ट आकार कम हो जाता है। वास्तव में सबसे अच्छे समाधान पर सुझावों के बाद।

कई धन्यवाद

Answer 1

इस

.comment-content p { 
    word-wrap: break-word; 
} 

Live Demo

More Information

प्रयास करें

Answer 2

यह आपकी मदद कर सकते हैं:

.class { 
    resize:none; 
} 

Answer 3

आप चाहते हैं, तो यह अच्छी तरह के रूप में सीमित कर दिया करने के लिए: oooooo ... उपयोग:

.comment-content .p{ 
    display:inline-block; 
    white-space: nowrap; 
    overflow:hidden; 
    text-overflow: ellipsis; 
} 

एक से अधिक पंक्ति देखते हैं, तो

का उपयोग

.comment-content .p{ 
    word-wrap: break-word; 
}