CSS - 沿角度包装文本

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

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