3

与设计师合作时，他们通常对完成的 HTML 页面中的自动换行非常挑剔。假设我正在处理固定布局（非响应式），并且设计师不喜欢文本换行的方式，我可以：

  • 调整padding-right
  • 添加手动<br>换行
  • 添加手动&nbsp;以避免中断（通常用于孤儿控制）

（就我而言，我正在为特定的移动设备进行设计，所以我知道屏幕尺寸，并且可以控制字体。此外，让设计师满意是不可商量的。）

我一直遇到的问题是文本或布局将在以后更新，并且这个特定的自动换行问题的遗物不再适用，引入了我们需要修复的问题。

所以我想知道是否有人可以提出以下策略：

  1. 允许在个别情况下完全任意控制自动换行；但，
  2. 不会让一切变得如此难以维持

我愿意接受程序、算法（javascript）或面向 CSS 的建议。

4

2 回答 2

1

这是我选择的策略。时间会证明它的可维护性。

  1. 不要编辑文本内容
  2. 通过添加改变文本流动方式的 CSS 类来修复换行，但不要使用已经用于控制布局的宽度或填充等属性

具体来说：

.tighten {
    letter-spacing: -0.011em;
}
.loosen {
    letter-spacing: 0.011em;
}
.hyphenate {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-after: 4;
    -webkit-hyphenate-limit-before: 4;
}

事实证明，这些难以察觉的间距变化可以对包裹产生巨大的影响。我实际上有这些类的几个变体，所以我可以尝试逐渐增加或减少空间来修复包装。

在严重的情况下，我使用 hyphenate 类（在这种情况下我只针对 iOS）。

在未来的修订中，当我们更改 div 中的文本时，我们可以从该 div 中删除紧缩、松散或连字符类，并查看是否有任何我们需要纠正的换行问题。如果有，我们会通过最初的反复试验，看看哪个类的外观最好。

于 2013-06-21T18:20:51.493 回答
0

使用<pre>标签，以便您可以插入预先格式化的文本。

于 2013-06-10T12:48:48.917 回答