CSS通过n角度旋转文本，而不是边界框? [英] CSS rotate text by n degress, but not the boundary box?

问题描述

我知道CSS的 transform:rotation 属性，以及用于制作成角度的 div 元素的方法，但是有一个非常重要的设计元素，我无法实现找到地址:

I am aware of the CSS transform: rotate property, and the methods used to make an angled div element, but there is one very important design element that I cannot find addressed anywhere:

当创建有角度的div元素时，我使用了一个旋转 n 度的包装器元素，然后使用了一个旋转了 span )> -n 度.不幸的是，这导致子元素具有独立于其父元素的自己的矩形边界.

When I create angled div elements, I use a wrapper element that is rotated by n degrees, and then the child element (often a span) that's rotated -n degrees. Unfortunately, this causes the child element to have its own rectangular boundary independent of its parent element.

下面的图像是一个非常基本的示例，每个人似乎都可以使用，子元素的文本在一个无角度的矩形内，但这不是我想要的:

The below image is a very basic example of what everyone seems to be alright with, where the child element's text is inside an un-angled rectangle, but this is not what I want:

.parent {
    width: 200px;
    height: 200px;
    transform: rotate(30deg);
    background-color: blue; /* for clarity in img */
}
.child {
    display: inline-block;
    transform: rotate(-30deg);
    background-color: rgba(250, 80, 80, 0.4); /* for clarity in img */
}

值得注意的是，子元素必须具有 display:inline-block 才能真正旋转.

It's worth noting that the child element must have display: inline-block in order to actually be rotated.

大约是我要寻找的东西

                                  Some
                            text goes here
                       and automatically just-
                  ifies to the shape of the parent
              element which in this case hap-
         pens to be a rectangle. Here's
            more text to show the
                full shape..
                     --

我尝试使用 text-orientation ，不同的位置值组合以及其他使用 transform 的技巧，但是我无法让文本像父元素是其边界；相反，它只是创建自己的！

I've tried using text-orientation, different position value combinations, and other tricks with transform, but I can't get the text to behave as though the parent element is its boundary; instead it just creates its own!

我对JavaScript解决方案没问题，但是纯CSS肯定会很好.希望这对于有资格的个人有足够的信息来解决问题.

I'm alright with a JavaScript solution, but pure CSS would certainly be nice. Hopefully this is enough information for a qualified individual to solve the problem.

感谢您的时间！

推荐答案

我认为唯一的近似方法是考虑 shape-outside ，但是要获取正确的值将非常棘手.

I think the only way to approximate this is to consider shape-outside but it would be very tricky to get the correct values.

在插图下方.您要做的就是更新width/height值以控制整体形状:

Below an illustration. All you have to do is to update the width/height values to control the overall shape:

.container {
  display: flex;
  width: 400px;
  margin: 20px auto;
  text-align: justify;
}

.box>div {
  display: inline;
}

.box>div:before,
.box>div:after {
  content: "";
  float: left;
  shape-outside: linear-gradient(var(--d), #fff 49%, transparent 50%);
  background: linear-gradient(var(--d), transparent 49.5%, red 50% 51%, transparent 51.5%);
}

.box>div:after {
  float: right;
}

.box>div:first-child:before {
  --d: to bottom right;
  width: 60%;
  height: 120%;
}

.box>div:first-child:after {
  --d: to bottom left;
  width: 40%;
  height: 140%;
}

.box>div:last-child:before {
  --d: to top right;
  width: 40%;
  height: 140%;
}

.box>div:last-child:after {
  --d: to top left;
  width: 60%;
  height: 120%;
}

<div class="container">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

我们可以添加更多CSS变量以使其更加灵活:

We can add more CSS variables to make it more flexible:

.container {
  --w: 60%;
  --h1: 110%;
  --h2: 130%;
  display: inline-flex;
  width: 300px;
  margin: 20px auto 200px;
  text-align: justify;
}

.box>div {
  display: inline;
}

.box>div:before,
.box>div:after {
  content: "";
  float: left;
  shape-outside: linear-gradient(var(--d), #fff 49%, transparent 50%);
  background: linear-gradient(var(--d), transparent 49.5%, red 50% 51%, transparent 51.5%);
}

.box>div:after {
  float: right;
}

.box>div:first-child:before,
.box>div:last-child:after {
  --d: to bottom right;
  width: var(--w);
  height: var(--h1);
}

.box>div:first-child:after,
.box>div:last-child:before {
  --d: to bottom left;
  width: calc(100% - var(--w));
  height: var(--h2);
}

.box>div:last-child:before {
  --d: to top right;
}

.box>div:last-child:after {
  --d: to top left;
}

<div class="container">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

<div class="container" style="--w:50%;--h1:120%;--h2:120%;">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

<div class="container" style="--w:30%;--h1:120%;--h2:120%;">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

请注意，这些值与您正在使用的文本紧密相关.您将需要反复试验才能获得最佳价值(我怀疑是否有适用于任何内容的通用解决方案……)

Note that the values are closely related to the text you are using. You will need a lot of trial and error to get the best values (I doubt there is a generic solution that work with any content ...)

相关问题:如何在带有边框半径的形状周围包裹文字?

这篇关于CSS通过n角度旋转文本，而不是边界框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！