5

我试图让文本沿一个角度换行。这说明了我想要做的比我能描述的更好的事情：

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

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

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

有什么建议么？

4

2 回答 2

2

这非常棘手，因为您无法合法地（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 设置为隐藏/可见。

于 2013-01-31T01:59:13.993 回答
0

有一个空白图像（锯齿状的步骤）你想在段落的左侧内联应该这样做。

于 2013-01-31T01:42:21.487 回答