左对齐容器中的倾斜文本

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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此技术适用于仅包含两行的文本。 对于包含2行以上的文字，您需要在标记中包装每一行（例如<span>）：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意，您需要将<span>设置为display:block，因为transforms don't apply on inline elements。

Answer 2

通过旋转和倾斜，您将获得类似透视的行为，因此超大尺寸就是这样。 您需要手动缩小偏斜文本，然后禁用其容器的溢出，这样您就不会看到任何重叠的文本。

这是我解决这个问题的唯一想法。

Answer 3

如果使用旋转作为变换，很难实现对齐。

使用倾斜来获得倾斜的线条。您可以（在某种程度上）使用斜体

获取字母上的角度

此外，不需要所有特定于供应商的转换

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;