सीएसएस - कोण

Question

के साथ लपेटें पाठ मैं एक कोण के साथ लपेटने के लिए पाठ प्राप्त करने की कोशिश कर रहा हूं। यह दिखाता है की तुलना में मैं यह वर्णन कर सकते हैं कि मैं क्या बेहतर करने के लिए कोशिश कर रहा हूँ:

http://bdub.ca/angle.png http://bdub.ca/angle.png

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

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

कोई सुझाव?

Answer 1

यह बहुत मुश्किल है कि आप वैध रूप से (डब्ल्यू 3 सी मानकों, मॉनिटर स्क्रीन रिज़ॉल्यूशन आकार और गोपनीयता) वर्णों की वास्तविक चौड़ाई का पता लगा सकते हैं। आप फ़ॉन्ट-आकार को एक विशिष्ट चौड़ाई पर सेट कर सकते हैं और चौड़ाई के करीब आने पर लाइन-ब्रेक डाल सकते हैं। (बी 4 मॉनिटर में)

तो सीएसएस: .paraIncrement {font-size: 12pt; }

मैं जावास्क्रिप्ट के साथ कुछ पुरानी हूँ तो चलो psudo-कोड चलो इस एक:

outputstr[] = array(); 
int index = 0; 
int startmax = 80; 
int innerCount = 0; 
for (int i = 0; paragraph.length; i++) { 
    outputstr[index] += paragraph[i]; 
    innercount++; 
    if (innercount == startmax) { 
     startmax -= 5; // how much you want the indent to shrink progressively. 
     innercount = 0; 
     index++; 
    } 
} 
for (int i = 0; i < output.length(); i++) { 
    echo '<span style="margin-left: '+(indentValue*i)+';">'+output[i]+'</span>'; 
} 

यह खंड शुरू की अधिकतम लंबाई 80 वर्ण लंबा, हर बार 5 से decrementing होने की उम्मीद है। इसके अलावा यदि आप यह सुनिश्चित करना चाहते हैं कि यह जल्दी टूट नहीं जाता है, तो सुनिश्चित करें कि css.overflow छुपा/दृश्यमान पर सेट है।

Answer 2

अनुच्छेद के बाईं ओर एक खाली छवि (चरणों की तरह जंजीर) होने पर आप इसे करना चाहिए।