क्या सीएसएस एक तत्व में प्रत्येक शब्द के बाद एक लाइन ब्रेक को मजबूर कर सकता है?

Question

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

दुर्भाग्य से, मालिक एक कंप्यूटर आदमी नहीं है, इसलिए यदि वह देखता foo<br />barहै कि मौका है तो वह डेटा को किसी भी तरह से संशोधित करेगा जैसे वह अनुवाद कर रहा है।

क्या किसी तत्व को लागू करने के लिए सीएसएस समाधान (चौड़ाई को बदलने के अलावा) है जो हर शब्द के बाद टूट जाएगा?

(मुझे पता है कि मैं पीएचपी में ऐसा कर सकता हूं, लेकिन मैं सोच रहा हूं कि क्या निफ्टी ट्रिक है जिसे मैं सीएसएस के बारे में नहीं जानता, शायद सीजेके सुविधाओं में।

संपादित करें

मैं आरेखित करने का प्रयास करूँगा कि क्या हो रहा है:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

लंबा शब्द अपने आप टूट जाता है, छोटा शब्द नहीं। मैं इसे इस तरह देखना चाहता हूं:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

Comments

HTML में, तत्व हर शब्द के बाद टूटते हैं, जब किसी दिए गए तत्व की चौड़ाई की आवश्यकता होती है। क्या आपका मतलब शब्दों में है?

— पॉल डी। वेट

@ पाओल - नहीं, मुझे ऐसे समाधान की आवश्यकता है जो चौड़ाई तय करने पर आधारित न हो। समस्या यह है, कुछ वाक्यांश लंबे होते हैं और स्वतः ही टूट जाते हैं (जैसे आप वर्णन करते हैं) और कुछ वाक्यांश छोटे होते हैं और टूटते नहीं हैं, जिससे असंगत प्रस्तुति होती है।

— बेन

@Paul - हां, यह ऐसा है जैसे आप बिल्कुल वर्णन करते हैं। लेआउट को वास्तव में नुकसान नहीं पहुंचा रहा है, लेकिन यह बेहतर दिख सकता है।

— बेन

आप शब्द-रिक्ति का उपयोग कर सकते हैं, लेकिन यह सभी शब्दों को प्रभावित करेगा .. मुझे लगता है कि आप स्पैन तत्वों में उन शब्दों को लपेटने के आसपास नहीं हो सकते।

— मेओ

@meo - ऐसा लगता है, सोचा के लिए धन्यवाद

— बेन

Answer 1

उपयोग

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

<parent-width>मूल तत्व की चौड़ाई कहां है (या एक उच्च मूल्य जो एक पंक्ति में फिट नहीं होता है)। इस तरह आप यह सुनिश्चित कर सकते हैं कि एक अक्षर के बाद भी एक लाइन-ब्रेक है। Chrome / FF / Opera / IE7 + के साथ काम करता है (और शायद IE6 भी क्योंकि यह शब्द-रिक्ति का समर्थन कर रहा है)।

Comments

यह निश्चित रूप से सबसे अच्छा उत्तर imho है

— हिजाद

@ToniMichelCaubet उत्तर की व्याख्या करना वास्तव में कठिन है, लेकिन उसका मतलब है: मूल तत्व की चौड़ाई .parent { word-spacing: 100px; }कहां 100pxहै। समस्या यह है कि यह समाधान काम नहीं करता है यदि आपके पास एक तरल पदार्थ है।

— जॉन कुरलक

बस शब्द रिक्ति के लिए एक बहुत ही उच्च मूल्य सेट करें word-spacing: 100000pxऔर जैसे कि आपको चौड़ाई के मामले में माता-पिता के तरल होने के बारे में चिंता करने की आवश्यकता नहीं होगी। 100% के एक शब्द की रिक्ति स्थापित करने से समझ में आता है (यह मूल चौड़ाई का 100% होगा), लेकिन प्रतिशत में व्यक्त मूल्य उस सीएसएस संपत्ति के लिए समर्थित नहीं हैं।

— साबोसी

यह बहुत मददगार था। मैं एक संवेदनशील स्थिति है, जहां एक पर चौड़ाई मैं टैब में पाठ चाहते रैप करने के लिए तो वे सभी एक ही ऊंचाई रहे हैं में इसका इस्तेमाल किया: word-spacing: 2em; और एक मोबाइल चौड़ाई में मैं उन्हें एकल लाइन होना चाहता हूँ:word-spacing: unset;

— विल

ये अद्भुत है। भविष्य में वर्षों से, एक गुच्छा धन्यवाद :)

— लुकास मदीना

Answer 2

@HursVanBloob द्वारा दिया गया उत्तर केवल निश्चित चौड़ाई वाले मूल कंटेनर के साथ काम करता है, लेकिन द्रव-चौड़ाई वाले कंटेनरों के मामले में विफल रहता है ।

मैंने बहुत सारी संपत्तियों की कोशिश की, लेकिन कुछ भी उम्मीद के मुताबिक काम नहीं किया। अंत में मैं इस नतीजे पर पहुंचा कि word-spacingबहुत बड़ा मूल्य देना पूरी तरह से ठीक है।

p { word-spacing: 9999999px; }

या, आधुनिक ब्राउज़रों के लिए आप CSS vwइकाई (स्क्रीन आकार के% में दृश्य चौड़ाई) का उपयोग कर सकते हैं ।

p { word-spacing: 100vw; }

Comments

कि मैं क्या करने की कोशिश करेंगे!

— vaskort

यह एक महान उपाय है!

— जो कॉनलिन

& Nbsp के साथ पूरी तरह से टूट जाता है; हालांकि।

— मैट फ्लेचर

खैर यह मेरे लिए काम नहीं करता है जो कंटेनर की द्रव की चौड़ाई को बहुत अधिक बढ़ा देता है।

— ओन्जा

क्या आप अपना मुद्दा दिखा सकते हैं?

— दीपक यादव

Answer 3

एक वैकल्पिक समाधान पर वर्णन किया गया है प्रत्येक पंक्ति में एक शब्द के लिए अलग-अलग सजा लगाने से, display:table-caption;तत्व को

Comments

यह वास्तव में केवल सबसे लंबे शब्द की चौड़ाई के आधार पर शब्दों को समूहित करता है।

— जेम्स साउथ

हालांकि यह एक पंक्ति में शब्दों को समूहित कर सकता है लेकिन यह बहुत सारी स्थितियों में वास्तव में अच्छी तरह से काम करता है और बड़े पैमाने पर शब्द रिक्ति विकल्प के रूप में हैकी के रूप में महसूस नहीं करता है।

— डेल

यह वह है जो मेरे लिए पूरी तरह से काम करता है, अच्छा है!

— मैट फ्लेचर

यह कोई परिणाम नहीं देता है

— जफरटेक

Answer 4

प्रयोग करके देखें white-space: pre-line;। यह जहां भी लाइन-ब्रेक कोड में दिखाई देता है, वहां एक लाइन-ब्रेक बनाता है, लेकिन अतिरिक्त व्हाट्सएप (टैब और स्पेस आदि) को अनदेखा करता है।

सबसे पहले, अपने कोड में अलग-अलग लाइनों पर अपने शब्द लिखें:

<div>Short
Word</div>

फिर शैली को शब्दों से युक्त तत्व पर लागू करें।

div { white-space: pre-line; }

हालांकि सावधान रहें , तत्व के अंदर कोड में हर लाइन ब्रेक एक लाइन ब्रेक बनाएगा। इसलिए निम्नलिखित लिखने से पहले शब्द के बाद और अंतिम शब्द के बाद एक अतिरिक्त लाइन ब्रेक होगा:

<div>
    Short
    Word
</div>

सीएसएस ट्रिक्स पर एक शानदार लेख है जो अन्य सफेद-अंतरिक्ष विशेषताओं को समझाता है।

Comments

आपको यह बताना चाहिए white-spaceकि प्रश्न का उत्तर देने के लिए कैसे उपयोग किया जा सकता है। क्षमा करें, लेकिन मैं नहीं देखता कि कैसे।

— १२:१४ पर jlgrall

अच्छी तरह से सीएसएस ट्रिक्स पर लेख इसे पूरी तरह से समझाता है, इसलिए मैंने सोचा कि एक लिंक पर्याप्त होगा, बजाय यहाँ जवाब को फिर से बनाने की कोशिश करने के।

— रास

ठीक है, तो आप स्रोत में वास्तविक लाइन ब्रेक लगाने का सुझाव देते हैं, और सीएसएस " white-space: pre;" का उपयोग करने के लिए उन रेखाओं को तोड़ते हैं जैसे एक <pre>टैग करता है? यह काम कर सकता है, और लाइन ब्रेक को अनुवादकों की तुलना में अधिक प्राकृतिक दिखना चाहिए <br />। मैं इसे जोड़ने के लिए आपके उत्तर को संपादित करने का प्रयास करूंगा :)

— jlgrall

बिल्कुल सही। वास्तव में, white-space: pre-line;यह संभवतः अधिक उपयुक्त होगा, क्योंकि यह आपके कोड में अतिरिक्त व्हाट्सएप की उपेक्षा करता है। मैं जवाब अपडेट कर दूंगा।

— नास

अच्छा है, शायद सिर्फ white-space: pre;IE 7.

— jlgrall

Answer 5

यदि आप दिए गए उत्तरों के अलावा विभिन्न समाधानों में से किसी एक का चयन करना चाहते हैं ...

एक वैकल्पिक विधि कंटेनर को 0 की चौड़ाई देना है और यह सुनिश्चित करने के लिए कि अतिप्रवाह दिखाई दे रहा है। तब प्रत्येक शब्द उसमें से बह निकलेगा और अपनी लाइन पर होगा।

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

या आप उन नए प्रस्तावित widthमूल्यों में से एक का उपयोग कर सकते हैं , बशर्ते कि आप अभी भी इसे पढ़ते समय मौजूद हों।

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Answer 6

आप सीएसएस में प्रत्येक शब्द को लक्षित नहीं कर सकते। हालाँकि, jQuery के एक बिट के साथ आप शायद कर सकते हैं।

JQuery के साथ आप प्रत्येक शब्द को <span>तब और फिर CSS सेट स्पैन में लपेट सकते हैं, display:blockजो उसे अपनी लाइन पर रखेगा।

पाठ्यक्रम के सिद्धांत में: पी

Comments

हां, मुझे इससे डर लगता था। यह PHP में भी कर सकता है लेकिन यह एक बदसूरत समाधान की तरह लगता है। मैं सोच रहा था कि वहाँ कुछ :first-childचाल या कुछ हो सकता है ...

— बेन

@Steve: नहीं, CSS चयनकर्ता वर्तमान में केवल आपको HTML तत्वों का चयन करने की अनुमति देते हैं, न कि टेक्स्ट नोड्स की। मैं सीएसएस 3 पाठ मॉड्यूल पर एक नज़र था , लेकिन वहाँ कुछ भी नहीं लगता है कि एक तत्व में प्रत्येक शब्द के बाद एक ब्रेक मजबूर करता है। मार्क का समाधान आपकी सबसे अच्छी शर्त है।

— पॉल डी। वेट

@Paul, @ मर्क - यदि आप में से कोई एक प्रतिनिधि चाहता है, तो आप इसका उत्तर दे सकते हैं और मैं इसे स्वीकार करूंगा। मैं इसे अचूक (अब के लिए) प्रति मेटा . stackoverflow.com/questions/48013/… के रूप में चिह्नित करने जा रहा हूं ।

— बेन

मुझे लगता है कि मार्क ने पहले ही इसका जवाब दे दिया है, सभी रिपीट उसका है जहाँ तक मेरा सवाल है।

— पॉल डी। वेट

@Paul - +1 टीम का खिलाड़ी आदमी को बैज या कुछ और देता है :)

— बेन

Answer 7

https://jsfiddle.net/bm3Lfcod/1/

उन समाधानों की तलाश करने वालों के लिए जो एक लचीले माता-पिता कंटेनर के भीतर काम करते हैं, जो उन बच्चों के साथ होते हैं जो दोनों आयामों में लचीले होते हैं। जैसे। नौसर बटन।

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

Comments

उस अवधि को देने का प्रयास करें जो CSSआप दे सकते हैं। एक संपत्ति कहो जो कारण हो सकती हैbrowser reflow

— दीपक यादव

ब्राउज़र रीफ़्लो?

— ओन्जा

Answer 8

मुझे उसी समस्या का सामना करना पड़ा, और यहाँ किसी भी विकल्प ने मेरी मदद नहीं की। कुछ मेल सेवाएँ निर्दिष्ट शैलियों का समर्थन नहीं करती हैं। यहाँ मेरा संस्करण है, जो समस्या को हल करता है और हर जगह काम करता है जो मैंने जाँची थी:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

या सीएसएस का उपयोग कर:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

Answer 9

सबसे अच्छा समाधान word-spacingसंपत्ति है।

<p>एक विशिष्ट आकार (उदाहरण 300px) के साथ एक कंटेनर में जोड़ें और उसके बाद आपको उस आकार को शब्द-रिक्ति में मान के रूप में जोड़ना होगा।

एचटीएमएल

<div>
 <p>Sentence Here</p>
</div>

सीएसएस

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

इस तरह, आपका वाक्य हमेशा टूट जाएगा और एक कॉलम में सेट हो जाएगा, लेकिन पैराग्राफ के साथ गतिशील होगा।

यहाँ एक उदाहरण कोडपेन है

Answer 10

मेरे मामले में,

    word-break: break-all;

पूरी ईमानदारी से काम किया, आशा है कि यह मेरे जैसे किसी अन्य नवागंतुक की मदद करेगा।

Comments

ए -1 मुझ से क्योंकि यह एक गलत जवाब है। यदि आवश्यक हो तो हर वर्ण पर लाइन को तोड़ता है।

— 15