如何在HTML中手动管理文本换行

Question

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

• 调整padding-right
• 添加手册<br>以打破一行
• 添加手册 以避免中断（通常用于孤儿控制）

（在我的情况下，我正在设计一个特定的移动设备，所以我知道屏幕尺寸，并且可以控制字体。另外，让设计师高兴是不可协商的。）

我一直遇到的问题是文本或布局会在以后更新，而这个特定词汇包含的遗物（不再适用）会引入我们需要修复的问题。

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

1. 允许完全随意控制个人的自动换行 例;但是，
2. 不会让所有事情都难以维持下去

我对程序，算法（javascript）或面向CSS的建议持开放态度。

Answer 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;
}

事实证明，间距的这些难以察觉的变化可以在包裹方面产生巨大的差异。我实际上有这些类的几种变体，所以我可以逐渐尝试或多或少的空间来修复包装。

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

在将来的修订中，当我们更改div中的文本时，我们可以从该div中删除紧缩，松散或连字符类，并查看是否存在我们需要纠正的任何包装问题。如果有的话，我们会经历原始的试错，看看哪个班级给出了最好的外观。

Answer 2

使用<pre>代码，以便插入预先格式化的文字。