कंटेनर

Question

में छोड़े गए पाठ को बाएं संरेखित करें मुझे स्कू को लागू करना होगा और तत्व पर घूमना होगा। यह ठीक काम करता है लेकिन विषम पाठ यह कंटेनर (परिणाम छवि देखें) में गठबंधन नहीं बचा है:

बाईं तरफ के पाठ कंटेनर बह निकला है: एच ("हैलो" से) और टी ("द" से) संरेखण सही नहीं है। इसलिए oversizing कि का परिणाम है

.skew-parent-wrapper { 
 
    width: 300px; 
 
    margin-left: 100px; 
 
    margin-top: 50px; 
 
    border: 1px solid red; 
 
    padding-bottom: 30px; 
 
} 
 

 
.skew-text { 
 
    -moz-transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    -webkit-transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    -o-transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    -ms-transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    transform: rotate(-10deg) skew(-30deg, 0deg); 
 
}

<div class="skew-parent-wrapper"> 
 
    <h1 class="skew-text">Hello Welcome to the skew text</h1> 
 
</div>

Answer 1

रोटेशन के साथ

और तिरछा आप परिप्रेक्ष्य की तरह एक व्यवहार मिल जाएगा:

यह है कि मैं क्या हासिल करने की कोशिश कर रहा हूँ । आपको अपने स्केव-टेक्स्ट को मैन्युअल रूप से स्केल करने की आवश्यकता है और फिर इसके कंटेनर के ओवरफ़्लो को अक्षम करने की आवश्यकता है ताकि आपको कोई ओवरलैपिंग टेक्स्ट न दिखाई दे।

यह ठीक करने के लिए मेरे लिए यही एकमात्र विचार है।

Answer 2

का एक तरीका एक लंबवत रेखा पर तिरछे हुए पाठ को संरेखित करना मैन्युअल रूप से नकारात्मक text-indent सेट करना है। इस तकनीक को भी नीचे बाईं ओर एक transform-origin स्थापित करने के लिए की आवश्यकता है:

.skew-parent-wrapper { 
 
    width: 300px; 
 
    margin-left: 100px; 
 
    margin-top: 50px; 
 
    border: 1px solid red; 
 
    padding-top: 30px; 
 
} 
 

 
.skew-text { 
 
    transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    transform-origin: 0 100%; 
 
    text-indent: -15px; 
 
}

<div class="skew-parent-wrapper"> 
 
    <h1 class="skew-text">Hello Welcome to the skew text</h1> 
 
</div>

इस तकनीक पाठ है कि केवल दो पंक्तियों पर लपेटता पर काम करता है। अधिक से अधिक 2 लाइनों के साथ पाठ के लिए, आप कोई टैग (एक <span> की तरह) में प्रत्येक पंक्ति रैप करने के लिए की आवश्यकता होगी:

.skew-parent-wrapper { 
 
    width: 300px; 
 
    margin-left: 100px; 
 
    margin-top: 50px; 
 
    border: 1px solid red; 
 
    padding-top: 30px; 
 
} 
 

 
.skew-text span{ 
 
    display:block; 
 
    transform: rotate(-10deg) skew(-30deg, 0deg); 
 
    transform-origin: 0 100%; 
 
}

<div class="skew-parent-wrapper"> 
 
    <h1 class="skew-text"> 
 
    <span>Hello Welcome to the</span> 
 
    <span>skewed text with</span> 
 
    <span>several lines many</span> 
 
    <span>many many lines</span> 
 
    </h1> 
 
</div>

ध्यान दें कि आप <span>display:block को निर्धारित करने की आवश्यकता क्योंकि transforms don't apply on inline elements।

Answer 3

यदि आप घूर्णन के रूप में घूर्णन का उपयोग करते हैं तो संरेखण प्राप्त करना मुश्किल है।

झुकाव रेखाएं प्राप्त करने के लिए एक स्काई का उपयोग करें। आप (कुछ हद तक) इटैलिक

इसके अलावा का उपयोग कर पत्र पर कोण प्राप्त कर सकते हैं, वहाँ सभी विक्रेता विशिष्ट की कोई जरूरत

.skew-parent-wrapper { 
 
    width: 300px; 
 
    margin-left: 100px; 
 
    margin-top: 50px; 
 
    border: 1px solid red; 
 
    padding-bottom: 30px; 
 
} 
 

 
.skew-text { 
 
    transform: skewY(-20deg); 
 
    font-style: italic; 
 
    background-color: goldenrod; 
 
}

<div class="skew-parent-wrapper"> 
 
    <h1 class="skew-text">Hello Welcome to the skewed text that can span several lines</h1> 
 
</div>