左对齐容器中的倾斜文本答案

【问题标题】：Left align skewed text in container左对齐容器中的倾斜文本
【发布时间】：2017-12-15 10:20:48
【问题描述】：

我必须在元素上应用倾斜和旋转。它工作正常，但 倾斜的文本未在其容器中左对齐（请参阅结果图像）：

左边的文字溢出了容器：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>

【问题讨论】：

基本上你不能。 transform 是纯粹的视觉更改...它不会影响元素的布局或大小。我怀疑你需要 Javascript。
你知道有这种效果的插件吗？
不，这对 SO 来说是题外话。

标签： html css css-transforms skew

【解决方案1】：

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

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案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>

【讨论】：