उत्तरदायी वेब डिज़ाइन में वांछित लाइन ब्रेक से निपटने के लिए सर्वोत्तम अभ्यास क्या हैं?

Question

मैं बिक्री या ईमेल के लिए सरल सिंगल पेज वेब आइटम का एक बड़ा सौदा डिजाइन करता हूं। मुझे अक्सर लगता है कि मैं सुर्खियों में हूं और विभिन्न माध्यमों पर मेरी वांछित लाइन टूट गई है।

उदाहरण के लिए, मेरे पास एक शीर्षक हो सकता है जैसे:

कटा हुआ ब्रेड के बाद से हमारी न्यू चीज़बॉब सबसे अच्छी चीज़ है!

लाइन पर बिल्कुल ध्यान न देने से लाइन टूट जाती है जैसे:

कटा हुआ ब्रेड के बाद से हमारी न्यू चीज़बॉब सबसे अच्छी चीज़ है !

पूर्ण वेब आकार में, मैं "" के बाद लाइन को तोड़ना चाहूंगा। दो लाइनें बनाना।

कटा हुआ ब्रेड के बाद से हमारी न्यू चीज़बॉब सबसे अच्छी चीज़ है!

मध्यम चौड़ाई वाली स्क्रीन के लिए, मैं दो बार टूटूंगा:

कटा हुआ ब्रेड के बाद से हमारी न्यू चीज़बॉब
सबसे अच्छी चीज़ है
!

यहां तक ​​कि संकरी स्क्रीन के लिए, मैं "नया", "बातमबोब" के बाद, और "चीज" के बाद टूट जाऊंगा। चार लाइनें बनाना।

कटा हुआ ब्रेड के बाद से हमारी न्यू
चीज़बॉब
सबसे अच्छी चीज़ है
!

मैं वास्तव में ब्रेक टैग ( <br>) का उपयोग नहीं करना चाहता हूं क्योंकि यह हार्ड-ब्रेक सभी आकारों में सेट करता है। अब तक मैं मीडिया के प्रश्नों और विभिन्न के लिए चौड़ाई प्रतिशत का उपयोग किया है h1- h5ताकि टैग टैग बलों एक को तोड़ने की चौड़ाई। लेकिन यह मुझे "हैकी" लगता है (यह वास्तविक पाठ के आधार पर कई बार बहुत मनमौजी भी होता है )।

HTML में हार्ड कोडिंग के बिना लाइन ब्रेक को नियंत्रित करने का सबसे अच्छा तरीका क्या है?

Answer 1

मैं केवल इस आधार पर सलाह दे रहा हूं कि यह पाठ के छोटे स्निपेट के लिए उपयोग किया जाता है न कि पैराग्राफ में।

सुर्खियों का प्रारूपण उचित सीमा के भीतर जितना संभव हो सके नियंत्रित किया जाना चाहिए । जावास्क्रिप्ट, या अतिरिक्त अनावश्यक तत्व काफी "उचित सीमा" नहीं हैं ।

दूसरी ओर नॉन-ब्रेकिंग स्पेसेस ... मॉडरेशन में उपयोग किए जाने पर उपयोगी हो सकते हैं।
शब्द जोड़े और उन तीनों के बीच रखने से जिन्हें आप एक साथ रखना चाहते हैं, जो आप चाहते हैं वे परिणाम उत्पन्न कर सकते हैं।

हालाँकि, आप कई लगातार उपयोग नहीं कर सकते हैं, आपके द्वारा उपयोग किए जा रहे शब्दों की लंबाई के आधार पर, बहुत से लिंक करने से टेक्स्ट व्यूपोर्ट या उसके कंटेनर से बाहर निकल जाएगा।

शब्दों के अपने विशेष सेट पर कुछ त्वरित प्रयोग करने से लिंक करने के लिए सर्वोत्तम शब्दों को प्रकट करना चाहिए।

इस प्रश्न में उदाहरण के लिए HTML जैसा दिख सकता है:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

वास्तव में यहां कोई सीएसएस आवश्यक नहीं है। इस उदाहरण में सीएसएस जो मैंने बनाया है वह सिर्फ मनोरंजन के लिए है।

---

संक्षेप में, इस पद्धति की कुंजी उन स्थानों की संख्या को सीमित कर रही है जहां पाठ को तोड़ने की अनुमति है।

---

प्रश्न को फिर से पढ़ने के बाद, मुझे एहसास हुआ कि मैंने आवश्यकताओं को पूरा नहीं किया है। इस विशिष्ट मामले के लिए, और इस धारणा पर कि ऐसे अन्य पृष्ठ हैं जिन्हें समान ध्यान देने की आवश्यकता है, मैं <br>पूर्ण-चौड़ाई के बिंदु के लिए एक को परिभाषित करूंगा । फिर मैं शीर्षक में सबसे आदर्श स्थान पर प्रत्येक पृष्ठ पर एक ही कक्षा का पुन: उपयोग करूंगा।

यह <br>वर्ग पूर्ण-चौड़ाई के अभिनय से कुछ भी छोटा होगा जैसे कि यह मीडिया के प्रश्नों के उपयोग के साथ भी नहीं है। व्यूपोर्ट के आकार में पूरी चौड़ाई से कम होने पर, हम  अकेले ही भरोसा करते हैं।

एकल के साथ एक और उदाहरण<br> जो निशान के करीब है।

HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

सीएसएस:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

Comments

प्रश्न में उदाहरण के रूप में कुछ के लिए, यह जाने का रास्ता है

— Zach Saucier

यह सबसे आसान, सबसे सीधा तरीका है। धन्यवाद।

— स्कॉट

Answer 2

सबसे अच्छा अभ्यास यह स्वीकार करना है कि आपके पास वेब पर लाइन ब्रेक पर कोई वास्तविक नियंत्रण नहीं है और इसे ध्यान में रखते हुए डिजाइन करना सबसे अच्छा है।

इसके विपरीत, विलोम रूप से, किसी भी उपाय को हैक किया जाना है। यह के रूप में होगा एचटीएमएल कोडिंग मुश्किल के बाहर उपयोगकर्ता परिभाषित पंक्ति विराम का पालन नहीं करता के रूप में एक हैक हो। आप इसे जेएस के साथ काफी आसानी से कर सकते हैं। अद्वितीय वर्गों के साथ खाली स्पैन के साथ अपने ब्रेक पॉइंट को सेट करें, फिर व्यूपोर्ट आकार के आधार पर आप वांछित प्रत्येक बीआर टैग में बीआर टैग इंजेक्ट कर सकते हैं।

कुछ सीएसएस शैली हैं जो ब्राउज़र को लाइन रैपिंग के तरीके को नियंत्रित करने के लिए नए ब्राउज़र पर काम करेंगे, लेकिन यह अभी भी आपको सटीक नियंत्रण नहीं देगा जो आप इस स्थिति में देख रहे हैं।

दूसरी ओर, यदि आपका लक्ष्य विशिष्ट रेखा विराम को नियंत्रित करने के लिए बहुत अधिक नहीं है, लेकिन यह सुनिश्चित करने के लिए कि आपके टेक्स्ट ब्लॉक को अपेक्षाकृत समान पंक्तियों में भी 'स्टैक' बनाया गया है, तो मैं प्रत्येक व्यूपोर्ट के लिए अलग से DIV की चौड़ाई निर्धारित करूंगा। यह सही नहीं होगा, लेकिन संभवतः बहुत करीब होगा और सबसे अच्छा समझौता हो सकता है।

Comments

इस। इसके अलावा, अगर आपने इसे पहले से नहीं देखा है, तो कृपया जॉन Allsopp द्वारा वेब डिज़ाइन का एक डाओ यहाँ पढ़ें

— bemdesign

Answer 3

इसके लिए एक jquery प्लगइन है, बैलेंस टेक्स्ट ।

यह एक एडोब-निर्मित प्लगइन है, जो सीएसएस विकल्प पाने के लिए एडोब के प्रस्तावtext-wrap: balance; के साथ बनाया गया है, जो कि एडोब इनडिजाइन की बैलेंस रेग्जेड लाइन्स सुविधा की तरह ही होगा (बहुत अच्छा लगता है, लेकिन अगर इसे स्वीकार कर लिया जाता है, तो यह ब्राउजर के समर्थन से कई साल पहले होगा)।

हालाँकि, प्लगइन अभी काम करता है। यह ऐसे किसी भी तत्व को संतुलित करता है जिसमें वर्ग है balance-text, या जैसे jQuery का उपयोग कर रहा है$('.some-elements').balanceText();

• यहाँ एक आधिकारिक Adobe डेमो है , जो कि उचित पाठ का उपयोग कर रहा है ।

• यहाँ एक डेमो मैंने बनाया बाईं ओर संरेखित का उपयोग कर <h1>रों हिट संपादित कोड को देखने के लिए -। यह लेखन के समय कुछ सीमाओं को दर्शाता है:

सीमाएं

यह कोड वर्तमान में केवल बिना इनलाइन तत्वों वाले ब्लॉक-स्तरीय टैग में पाठ पर काम करता है।

डेमो 4 में आप कैसे एक ऐसा कुछ संतुलित पाठ के अपने ब्लॉक के भीतर देखेंगे <a>लिंक, <span>की तरह है या जोर <em>, <strong>, <b>, <i>आदि निकाल दिया जाएगा।

इसके अलावा, डेमो 1, 2 और 5 की तुलना करते हुए, आप देखेंगे कि आपको सीएसएस वर्ग और jQuery कॉल दोनों का उपयोग करने की आवश्यकता है ।

---

यह मामूली विश्वसनीय लगता है लेकिन कभी-कभी गड़बड़ होता है - लेखन के समय, यह कभी-कभी फिसल जाता है जब यह एक साइड कॉलम में होता है, अकेला अनाथ छोड़ देता है (लेकिन यह 95% + समय का काम लगता है और मैंने अभी तक इसे पर्ची के अलावा नहीं देखा है जब एक साइड कॉलम में), और अस्पष्टीकृत कारणों के लिए, मेरे डेमो फ़ायरफ़ॉक्स पर काम नहीं करते हैं, लेकिन एडोब के डेमो (IE9 + में ठीक है, अभी IE8 में परीक्षण नहीं कर सकते हैं)। यदि आप इसका उपयोग करते हैं, तो कुछ परीक्षण समय में कारक।

Comments

कोई विचार नहीं है, लेकिन GitHub पृष्ठ में यह वर्णन किया गया है कि यह कैसे काम करता है। ऐसा लगता है कि यह सिर्फ DOM सर्चिंग और बेसिक मैनिपुलेशन सामान का उपयोग करता है, इसलिए आप Sizzle (jQuery के चयनकर्ता बिट) का उपयोग करने के साथ दूर जाने में सक्षम हो सकते हैं और फिर आवश्यक रूप से तत्व हेरफेर सामान को पैच कर सकते हैं। लेकिन वह आसानी से बहुत सारे काम कर सकता है ...

— user56reinstatemonica8

मुझे लगता है कि यह "अल्गोरिदम" है जिसे रीडमी फ़ाइल की शुरुआत में वर्णित किया गया है। असल में, वे बस कह रहे हैं कि उन्होंने आसान क्रॉस-ब्राउज़र संगतता के लिए jQuery का उपयोग किया है।

— user56reinstatemonica8

@ डंबनिक यदि आप jQuery के आकार के बारे में चिंतित हैं, तो आप Zepto.js का उपयोग करने की कोशिश कर सकते हैं , लेकिन मैं 100% निश्चित नहीं हूं कि यह इस प्लगइन के साथ मूल रूप से काम करता है। मुझे नहीं लगता कि कोई वैनिला js संस्करण उपलब्ध है (हालांकि यह संभव है कि एक बना हो)

— Zach Saucier

नीचे रहस्य ... मुझे लगता है कि किसी को वास्तव में jQuery पसंद नहीं है

— user56reinstatemonica8

Answer 4

मुझे इससे कुछ हद तक नियमित रूप से निपटना है, डिजाइनरों से इनपुट के साथ चीजों को एक निश्चित तरीके से तोड़ना है। मैंने सबसे सरल तरीका यह पाया है कि पाठ के अंदर एक वर्ग के साथ एक स्पैन डालना है, और फिर उस अवधि display: block;को मीडिया के प्रश्नों के लिए रखना है ।

तो यह कुछ इस तरह दिखेगा:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

तो मैं सीएसएस इस तरह से कुछ के साथ होगा:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

आपको अभी भी गुजरना है और यह सुनिश्चित करना है कि सभी तरह की चौड़ाई के लिए चीजों को तोड़ दें।

यदि यह लगातार समस्या है, तो आप लाइन-ब्रेक क्लासेस का अपना सेट ला ट्विटर बूटस्ट्रैप या जो भी ग्रिड सिस्टम आप उपयोग कर रहे हैं, जो भी नामकरण सम्मेलन आप उपयोग कर रहे हैं उसके बाद वर्ग नाम मॉडलिंग कर सकते हैं।

Answer 5

आप स्क्रीन की चौड़ाई का पता लगाने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं और आंतरिक HTML के माध्यम से एक खाली div में सही संस्करण (<br> के रूप में आप उन्हें अपने पोस्ट में) लिख सकते हैं।

दुर्भाग्य से, "वांछित वेब ब्रेक" और "बेस्ट वेब प्रैक्टिस" एक साथ नहीं चलते हैं। अपनी पूर्णतावादी इच्छा को सही जगह पर हर शब्द को प्राप्त करने दें - बहुत अधिक स्क्रीन संभावनाएं हैं और बहुत सारे पाठक हैं जिनके पास डिजाइनर मानसिकता नहीं है जो आपको उनके शीर्षकों में लाइन ब्रेक के बारे में भी ध्यान रखना होगा। इन मुद्दों की बेहतर समझ पाने के लिए उत्तरदायी वेब डिज़ाइन देखें।

Comments

यह जिम्मेदारी से करने के लिए बहुत कठिन है और बहुत अधिक गणना की आवश्यकता है। मैं इस दृष्टिकोण का उपयोग करने की सलाह नहीं देता

— Zach Saucier

लगता है सवाल बदल गया है। मैंने उस समय दिए गए प्रश्न का उत्तर दिया, जो कि लाइन ब्रेक को प्रदर्शित करने के लिए था जहां वह उन्हें चाहता था।

— स्टीव

मैं "वांछित लाइन ब्रेक" को संबोधित कर रहा था। मैंने उसे एक सैद्धांतिक जेएस कार्यान्वयन दिया जो वह चाहता है। मेरा दूसरा पैरा मेरी स्थिति बताता है, हालांकि, और मैं उस दृष्टिकोण के खिलाफ हूं। RWD जाने का तरीका है, और यही मैं अपने ऐप्स में उपयोग करता हूं।

— स्टीव

Answer 6

मेरी वर्तमान विधि ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

और सीएसएस:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

विधियां कभी-कभी वास्तविक पाठ के उपयोग के आधार पर कुछ समायोजन की आवश्यकता होती हैं , लेकिन यह सामान्य योजना है जिसका मैं उपयोग करता हूं। h1टैग की चौड़ाई को अनिवार्य रूप से कम करना ताकि लाइन टूट जाए जहां मैं चाहता हूं कि वह टूट जाए।

यह काम करता है, यह सिर्फ यह सुनिश्चित करने के लिए परीक्षण की आवश्यकता है कि ब्रेक वांछित कहाँ हो रहे हैं। लेकिन, फिर किसी भी घटना में पूरी तरह से परीक्षण की आवश्यकता है। तो, यह जरूरी नहीं कि उस संबंध में अधिक काम हो।

Comments

नोट: आप margin: 0 auto; text-align: center;मीडिया क्वेरी के बाहर सिर्फ एक बार आवेदन कर सकते हैं और यह उन सभी पर लागू होगा

— Zach Saucier

इसके अलावा, इस सामग्री के लिए विशिष्ट कुछ के साथ यह सिर्फ आंतरिक स्पैन का उपयोग करने के लिए बेहतर होगा ... यह सब सीएसएस थोड़ा सा है और जैसे ही आप फ़ॉन्ट आकार या कुछ इसी तरह बदलते हैं, इसे सभी को तदनुसार बदलना होगा

— ज़च सॉसर

माना। सभी मीडिया आकारों के लिए फ़ॉन्ट आकार विश्व स्तर पर अधिक नियंत्रित हैं। यह मार्कअप का सिर्फ एक नमूना था।

— स्कॉट

Answer 7

आप उन स्थानों पर जोड़ सकते हैं white-space: nowrapऔर <wbr>उन स्थानों पर रख सकते हैं जहाँ आप लाइन ब्रेक की अनुमति देना चाहते हैं। यदि यह पर्याप्त नहीं है और आप मीडिया के प्रश्नों के साथ ठीक नियंत्रण चाहते हैं, तो आप अभी भी कक्षाएं जैसे जोड़ सकते हैं<wbr class="mobileOnly">

<wbr>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr