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

How to manually manage text wrapping in HTML

本文关键字：文本 换行 HTML 何手动 管理      更新时间：2023-09-26

当与设计师合作时，他们通常对完整HTML页面中的换行非常挑剔。假设我正在使用固定布局(无响应)，并且设计人员不喜欢文本的包装方式，我可以:

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

(在我的例子中，我是为特定的移动设备设计的，所以我知道屏幕大小，并且可以控制字体。此外，让设计师高兴是不容商量的。

我一直遇到的问题是，文本或布局将在稍后更新，而这种特定的换行关系的遗物，不再适用，引入了我们需要修复的问题。

所以我想知道是否有人可以建议一个策略:

  1. 允许完全任意控制单独的换行情况下;但是,
  2. 不会让一切都难以维持下去

我愿意接受面向过程、算法(javascript)或css的建议。

这是我选择的策略。时间会告诉我们它的可维护性。

  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中删除tighten, loose或连字符类，并查看是否有需要纠正的换行问题。如果有，我们通过最初的试错，看看哪个类提供最好的外观。

使用<pre>标记，这样可以插入预格式化的文本。

相关文章：