CSS के साथ पूर्व की तरह दिखने के लिए स्पैन कैसे बदलें?

Question

क्या केवल <span>टैग ( सीएसएस) का उपयोग करते हुए टैग की <div>तरह अपनी सामग्री को सुधारने के लिए एक टैग (या ) को बदलना संभव है <pre>?

Answer 1

पर देखो W3C CSS2.1 डिफ़ॉल्ट स्टाइल शीट या CSS2.2 कार्यकारी ड्राफ्ट । PRE के लिए सभी सेटिंग्स कॉपी करें और उन्हें अपनी कक्षा में रखें।

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

Comments

यह इस तरह से करने के लिए यह एक अच्छा विचार है कि यह समझने के लिए कि ये चूक कहाँ से आती है।

— डायोडस - जेम्स मैकफर्लेन

जब मैं यह कोशिश करता हूं, तो लाइन ब्रेक संरक्षित नहीं होते हैं।

— अगल कुरियन

जब पाठ बहुत चौड़ा हो, तो <pre> टैग क्षैतिज स्क्रॉलबार प्रदर्शित करेगा, लेकिन यह css नहीं होगा। किसी को पता है कि उन्हें कैसे दिखाना है?

— shindigo

@shindigo क्या आपने उपयोग करने की कोशिश की है overflow: scroll? या अगर आप केवल क्षैतिज स्क्रॉलिंग overflow-x: scroll डेवलपर

— pmozilla.org/en-US/docs/Web/CSS/overflow

@ शिन्डीगो overflow: auto;बेहतर हो सकता है अन्यथा आप स्क्रॉलबार के दो सेट के साथ समाप्त हो सकते हैं जब आपको उनकी आवश्यकता नहीं होती है।

— संभल

Answer 2

देखें white-space सीएसएस संपत्ति ।

.like-pre { white-space: pre; }

Comments

वैकल्पिक रूप से, आप white-space: pre-wrapउपयोगी पा सकते हैं । यह व्यवहार करता है pre, लेकिन लंबी लाइनों को लपेटता है।

— काई कार्वर

Answer 3

यह स्पैन को PRE की तरह बनाता है:

span {
  white-space: pre;
  font-family: monospace;
  display: block;
}

सीएसएस चयनकर्ता को उचित रूप में बदलना याद रखें।

Answer 4

विशेष रूप से, वह संपत्ति जो आप देख रहे हैं:

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

Answer 5

इसे इस्तेमाल करे

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}

Answer 6

इस शैली का प्रयास करें

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;   
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

यहाँ एक ही प्रयोग किया जाता है - http://www.makemyshop.in/

Answer 7

स्पैन टैग के बजाय केवल <pre> टैग का उपयोग क्यों नहीं किया जाता है? दोनों इनलाइन हैं, इसलिए दोनों को उस तरह से व्यवहार करना चाहिए जैसा आप चाहते हैं। यदि आपको <pre> की पूरी परिभाषा को ओवरराइड करने में कोई समस्या है, तो बस इसे एक कक्षा / आईडी दें।

Comments

कभी-कभी आपके पास पहले से ही एक पृष्ठ पर एक स्पैन होता है और इसे बदल नहीं सकता है, जैसे कि यह एक मौजूदा सीएमएस सिस्टम का हिस्सा है।

— श्री चमकदार और नई 安

B / c फ्रेमवर्क मेरे <pre> जिस तरह से मैं इसे पूछ रहा हूं, के तहत सामग्री डालने से इनकार कर रहा हूं। मैं इसके इर्द-गिर्द काम कर सकता था, लेकिन यह बहुत कठिन है बस कुछ सीएसएस प्रॉपर सेट करने से।

— jsight