CSS - 沿角度换行文本

CSS - Wrap text along angle

本文关键字：换行 文本 CSS      更新时间：2023-09-26

我正在尝试让文本沿一个角度换行。这说明了我试图做得比我能描述的更好：

http://bdub.ca/angle.png http://bdub.ca/angle.png

我在这里找到了一个解决方案，但它使用了很多空的浮动div 来创建效果。我需要在一个页面上多次执行此操作，因此最好有一个重量更轻的解决方案。JavaScript 是可以的，如果我可以在页面加载时运行它以使 DOM 免受额外元素过载的影响。

我对JS解决方案的头脑风暴甚至试图弄清楚如何将每行包装在一个范围中，并将范围的左边距连续设置得更大。需要注意的是，文本是一个将自动换行以适应容器的段落 - 不幸的是，我不能要求我的客户从 Wordpress 插入换行符 - 因此将每一行换行到一个范围将涉及以某种方式检测自动换行使用 javascript。

有什么建议吗？

这非常棘手，因为您无法合法地（w3c 标准;显示器屏幕分辨率大小和隐私）检测字符的实际宽度。 您可以将字体大小设置为特定宽度，并在接近宽度时自己插入换行符。 （在 B4 显示器中）

so css： .paraIncrement { font-size： 12pt; }

我对javascript有点生疏，所以让我们对这个进行psudo编码：

outputstr[] = array();
int index = 0;
int startmax = 80;
int innerCount = 0;
for (int i = 0; paragraph.length; i++) {
   outputstr[index] += paragraph[i];
   innercount++;
   if (innercount == startmax) {
      startmax -= 5; // how much you want the indent to shrink progressively.
      innercount = 0;
      index++;
   }
}
for (int i = 0; i < output.length(); i++) {
   echo '<span style="margin-left: '+(indentValue*i)+';">'+output[i]+'</span>';
}

本部分预计开头的最大长度为 80 个字符，每次减少 5 个字符。 此外，如果您想确保它不会提前中断，请确保将 css.overflow 设置为隐藏/可见。

在段落左侧内联一个空白图像（锯齿状的步骤）应该可以做到。

相关文章：