CSS - 沿角度包装文本

Question

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

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

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

我为JS解决方案集思广益,试图弄清楚如何在跨度中包裹每条线并将跨距的左边距设置得更大.需要说明的是,该文本是一个段落会自动换行以适合容器 - 可惜我不能让我的客户插入来自WordPress的换行符 - 所以来包装一个跨度的每一行会涉及莫名其妙检测自动换行使用javascript.

有什么建议？

Answer 1

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

所以 css: .paraIncrement { 字体大小: 12pt; }

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

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 设置为隐藏/可见。