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

Question

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

javascripthtmlcssword-wrap

3

与设计师合作时，他们通常对HTML页面中的换行非常挑剔。假设我正在使用固定布局（非响应式），而设计师不喜欢文本的换行方式，我可以采取以下方法：

调整padding-right
手动添加<br>以断开一行
添加手动 以避免断行（通常用于孤行控制）

（在我的情况下，我正在为特定的移动设备设计，因此我知道屏幕大小，并且可以控制字体。同时，让设计师满意是不可谈判的。）

我经常遇到的问题是，文本或布局稍后会更新，而这个具体的换行关注点的遗留问题已经不再适用，这会引入我们需要修复的问题。

因此，我想知道是否有人可以建议一个策略，该策略：

允许完全任意地控制单个案例的换行；但是，
不会使未来的维护变得困难

我接受过程、算法（JavaScript）或面向CSS的建议。

- Joshua Smith

2

不要忘记使用美妙的软连字符  来控制单词如何分割。 - RichieHindle

你尝试过使用空格吗？https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space - antyrat

4

“<wbr>”元素表示换行机会，但不会强制换行。它告诉浏览器：“如果你认为某个地方需要换行，这是一个不错的位置”。 - dave

空格可以让我完全关闭换行，就像使用<pre>元素一样。但问题的关键是95%的文本自动换行都很好。设计师们关注于一小部分让他们不舒服的文本，我们需要修复一堆小问题。然后，即使在文本和布局发生变化之后，这些修复措施仍会挂在那里，引起全新的问题类别。 - Joshua Smith

文本对齐方式采用两端对齐怎么样？设计师们会满意吗？<pre>标签可行吗？现在，我明白这是不可协商的，但如果设计师们认为在这里或那里发生换行非常重要-那就把它变成一个新段落。这将始终位于自己的行上。 - ProfileTwist

我在我的整个生命中从未遇到过喜欢两端对齐文本的设计师。 :) - Joshua Smith

2个回答

0

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

- Gimmy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joshua Smith · Accepted Answer

这是我选择的策略。时间会告诉我们它是否易于维护。

不要编辑文本内容。
通过添加改变文本流动方式的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、loosen或hyphenate类别，然后查看是否需要纠正任何换行问题。如果有，我们将通过最初的试错来确定哪个类别效果最佳。