Left-align text in container

Question

I have to apply braids and rotate on the element. It works fine, but the skewed text does not align left in the container (see Image of result):

The text on the left overflows the container: H (from "Hello") and the alignment T (from "The") are incorrect.

This is what I am trying to achieve:

.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

One way to align skewed text in a vertical line is to manually set a negative text-indent . This method also requires you to set transform-origin in the lower left of the screen:

 .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> 

This method works with text that wraps on only two lines. For text with more than two lines, you need to wrap each line in the tag (for example, <<22>):

 .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> 

Note that you need to set the <span> to display:block , because the transformations do not apply to inline elements .

Answer 2

With a turn and a skew, you get the same idea as a perspective, so oversizedness is the result of this. You need to manually reduce your text and then disable the overflow of its container so that you do not see any overlapping text.

This is the only idea for me to fix this.

Answer 3

It is difficult to achieve alignment if you use rotation as a transformation.

Use skew to get sloping lines. You can (to some extent) get the angle above the letters using italics.

In addition, there is no need for all supplier related trends.

 .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>