html - 左对齐容器中的倾斜文本

Question

我必须在元素上应用倾斜和旋转。它工作正常，但容器中的倾斜文本未左对齐(参见结果图像):

左侧的文本溢出容器:H(来自“Hello”)和 T(来自“The”)对齐不正确。

这就是我要实现的目标:

.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

在垂直线上对齐倾斜文本的一种方法是手动设置负值 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 .