Question

我正试图让文字沿着一个角度包裹。这说明了我想要做的比我能描述的更好：

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

我找到了一个解决方案here，但它使用了很多空的浮动div来创建效果。我需要在页面上多次这样做，所以最好有一个重量更轻的解决方案。 JavaScript是可以的，如果它是我可以在页面加载上运行的东西，以避免DOM从额外元素的重载。

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

有什么建议吗？

Answer 1

这是非常棘手的，因为你不能合法地（w3c标准;监视屏幕分辨率大小和隐私）检测字符的实际宽度。您可以将font-size设置为特定宽度，并在接近宽度时自行插入换行符。（在b4监视器中）

所以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设置为hidden / visible。

Answer 2

如果要在段落的左侧内嵌一个空白图像（锯齿状的步骤）应该这样做。

CSS - 沿角度包装文本

2 个答案: