Javascript 将文本与倾斜的父对象对齐，而不倾斜文本

试图归档这样的东西。对我来说非常重要的是，保持倾斜的纵横比。未使用外部剪辑路径或形状存档此文件。 请帮帮我，这狗屎快把我逼疯了。 HTML代码如下所示

<div class="wrapper">
<p>text text text text text text text text text text text</p>
</div>

文本文本文本文本文本文本文本文本文本文本文本文本

我想了一个解决办法，但没有实现。只需通过js计算文本中的行数，然后根据行前的行高等应用边距即可完成此操作。 谢谢。

我终于拿到了。 不支持跨浏览器：-( 这是我的解决方案——它一点也不完美

这里唯一的问题是，角度不相等。你可以看到

.text

和外部

.text\u content

之间的边距从上到下是不相等的。我不知道为什么，因为数学从来不会说谎：-p

• 第一步是在文本包装器

  旁边添加一个元素
  .angle
  。text

  带有

  float:left；

• 第二步从文本包装器

  .text

  获取高度，并使用js为元素

  .angle

  提供相同的高度和宽度值。

  .angle

  元素现在响应文本的长度
• 第三步将

  .angle

  元素指定为

  形状外部的多边形

  ，并使用此公式tan（α）*a=b获得多边形点的正确坐标。现在

  .angle

  元素允许文本在其周围浮动

对于外部的

.text\u内容

几乎相同。但是使用

剪辑路径

来隐藏溢出，而不是

外部的形状

ps：我为我的英语不好感到抱歉，我已经尽力了


函数角度_text（）{
变功角_度=11；
var angle_rad=角度_deg*Math.PI/180；
//转换为rad
var height_of_text=$（'.text_content.text'）.height（）；
//获取文本的高度->包括h1和p
$（'.text\u content.angle'）。高度（文本的高度）；
//相等地设置三角形元素的高度和宽度
$（'.text\u content.angle'）。宽度（文本的高度）；
var b=数学tan（角度×弧度）*文本的高度；
//tan（a）xa=b——以px为单位的三角形多边形的宽度
$（'.text_content.angle'）.css（'shape-outside'，'polygon（0.0'，+b+'px 0，0%100%））
//将多边形设置为浮动文本的形状
$（'.text_content.angle'）.css（'clip-path'，'polygon（0,0，+b+'px 0,0%100%））
//将多边形设置为路径以查看三角形
var height_of_content=$（'.text_content'）.height（）；
//得到整个街区的高度
var b=数学tan（角度×弧度）*内容物的高度；
//tan（a）xa=b——以px为单位的三角形多边形的宽度
$（'.text_content'）.css（'clip-path'，'polygon（'+b+'px 0，100%0，100%100%，0%100%））
//将多边形设置为隐藏溢出的路径
}
角度文本（）//现场调用功能就绪
$（窗口）.resize（函数（）{//在调整窗口大小时调用函数
角度文本（）；
});
.text\u内容{
保证金：2rem 0；
颜色：#fff；
垂直对齐：顶部；
文本对齐：左对齐；
宽度：50%；
填充：2rem；
换字：正常；
线高：1.5雷姆；
框大小：边框框；
浮动：对；
位置：相对位置；
背景：蓝色；
}
.角度{
背景：绿色；
浮动：左；
}
p{
保证金：1rem 0；
字体：斜体；
}
h1{
字号：2rem；
线高：2rem；
保证金：0；
}

嘿，伙计们
堆码溢出文本：所有人都可以坐在一张桌子上，消费者可以坐在另一张桌子上，他们可以坐在另一张桌子上。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的

当只对一个
元素进行反扭曲时，您遇到的问题是该元素将始终被视为方形块。这意味着每条新线都垂直向下渲染，而不是沿着父对象的倾斜边渲染。为了解决这个问题，您只需要将段落分解为更小的单个内联块

手动执行此操作并不好，这就是为什么我建议使用一层脚本来执行此操作的原因（使用跨浏览器库和一些可以针对文本节点（例如）的内容可以很容易地组合在一起）。但是，您也不希望对大量文本使用这种方法，因为这将导致浏览器的大量处理。在CSS和JS中：


.skew{
宽度：400px；
变换：倾斜（-20度）；
背景：红色；
}
.skew>span{
显示：内联块；
变换：倾斜（20度）；
}

这是很多
文本的格式。这
有很多
文本。这是
大量的文本。
这是很多
文本的格式。这
有很多
文本。这是
大量的文本。
这是很多
文本的格式。这
有很多
文本。这是
大量的文本。
可能对您有所帮助。请提供一个简短的代码示例。@JoeB。文字应笔直，不歪斜。只需要对齐到边界box@sba我的js解决方案没有走得很远，因为我找不到任何行计数脚本：-（但我会加入html标记。请按照my@JoeB的建议进行操作。我检查过了，这正是您想要的。我猜是的，刚刚意识到shape outside很少支持浏览器。感觉很糟糕。我需要一个客户端-他