उत्तरदायी डिजाइन

Question

पर लंबे शीर्षक को ellipsis में बदलने की कोशिश कर रहा है, मैं एक उत्तरदायी वेब ऐप डिज़ाइन कर रहा हूं, और मैं शीर्षक में लंबे टेक्स्ट को इलिप्सिस के साथ encapsulate करना चाहता हूं। मैं यह कैसे कर सकता हूँ? यह यहाँ एक संवेदनशील पेज (कोई निश्चित-चौड़ाई) है ...

एक उदाहरण

किसी को भी मदद कर सकते हैं क्या है?

संपादित करें:

मैं इस तरह एक अधिकतम-चौड़ाई और एक अंडाकार अतिप्रवाह कहा:

max-width: 200px; 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 

लेकिन यह मेरे लिए काम नहीं करेगा क्योंकि यहाँ मुख्य जवाबदेही है। मैं विशेष रूप से आईओएस मोबाइल ब्राउज़र के लिए शीर्षक की अधिकतम चौड़ाई को लक्षित नहीं करना चाहता हूं, मैं अधिकतम स्मार्ट चौड़ाई को बढ़ाने या सभी स्मार्ट फोनों को कम करना चाहता हूं। कोई सुझाव?

Answer 1

कौन जानता था कि आप इसे सीधे सीएसएस में संभाल सकते हैं? मैं आश्चर्यचकित था, लेकिन text-overflow संपत्ति की जांच करें। संभावित मूल्यों में से एक इलिप्सिस है! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

बेला देखें: http://jsfiddle.net/PdRqB/

आप शीर्षक के लिए तीन गुण जोड़ने की जरूरत:

.title { 
    overflow: hidden; /* to hide anything that doesn't fit in the containing element. */ 
    white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */ 
    text-overflow: ellipsis; /* to do what you want. */ 
} 

एक शांत हिस्सा है, कोई मीडिया क्वेरी आवश्यक है। यह पहले से ही उत्तरदायी है (पहेली में फलक का आकार बदलने का प्रयास करें)।

अद्यतन:

बस अपने अद्यतन देखा ... आपका युक्त तत्व की चौड़ाई एक प्रतिशत, यहां तक ​​कि 100% पर सेट किया जा सकता है। फिर, overflow: hidden और white-space: nowrap बच्चे के शीर्षक तत्व पर अपना जादू कर सकते हैं।