javascript - CSS - 沿 Angular 换行文本

Question

我试图让文本沿一个 Angular 换行。这说明了我正在努力做的比我描述的更好:

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

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

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

有什么建议吗？

Answer 1

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

所以 css: .paraIncrement { font-size: 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 设置为隐藏/可见。