如何在 HTML 按钮中换行不包含空格的文本

Posted 2023-02-22

【中文标题】如何在 HTML 按钮中换行不包含空格的文本

【英文标题】：how wrap text that does not contain whitespace in HTML button

【发布时间】：2013-08-10 02:11:54

【问题描述】：

我正在自动创建 html 按钮。以这种自动方式创建的代表按钮如下：

<input type="button" value="Expected_Performance_of_the_ATLAS_Experiment,_Vol._3.pdf" onclick="location.href='Expected_Performance_of_the_ATLAS_Experiment,_Vol._3.pdf';"><br>

文件名和诸如此类的东西会变得很长，所以我需要实现按钮文本的换行。我知道the trick 涉及使用 CSS 属性 white-space （例如

style="width: 600 px;
 white-space: normal;"

)，但这在处理我正在使用的文件名时没有很大帮助。 是否有一种方法可以提供更详细的定界选项（也许空白可以被赋予最高优先级，下划线被赋予次高优先级等等）？ 有没有更有意义的不同方法？ 感谢您提出任何想法。

【问题讨论】：

从用户界面的角度来看，为什么不将文件名作为按钮上方/旁边的标签，而只需将按钮文本更改为“下载”或“打开”？这将不再需要在按钮上显示如此长的文件名并尝试执行 CSS“技巧”。

【参考方案1】：

编辑：在 Firefox 中这不起作用，但是，如果将其应用于 <button> 元素而不是 <input type="button"> 元素，它确实起作用。

Updated jsFiddle

---

您可以考虑使用 CSS 属性 word-wrap:break-word;。这会强制文本换行，无论它是否有空格。

jsFiddle（见编辑）

(Source)

据我所知，没有 CSS 属性可以为文本中的不同分隔符提供优先级。这可能必须通过 javascript 以某种方式实现。

【讨论】：

这是一个功能性解决方案。非常感谢！

jsfiddle 在 Firefox 上不起作用（字符串被截断）。即使word-wrap:break-word 有效，它也会在任意点断开字符串。

【参考方案2】：

您不能在 CSS 中指定任何准确的换行行为。它基本上是在浏览器的控制之下，它因浏览器而异。理论上，您可以在属性中插入 U+200B 零宽度空格字符，但它们似乎不受浏览器的支持（可能是因为按钮文本呈现与普通文本呈现不同）。

正如@Tanner 所建议的，将文件名放在按钮之外是一种更好的方法，使按钮文本保持非常短。这对可用性有好处。如果文件名出现换行问题，当文件名显示为普通文本时，它们可以得到更好的解决；例如，U+200B (​) 在指定允许的断点方面效果很好。

或者，只需创建文件名链接，因为这是 button 真正的用途，除了这里使用的 button 技术在禁用 JavaScript 时不起作用。如果需要，您可以为链接设置样式，就像使用 CSS 的按钮一样 - 内容仍然是文本，其中换行问题比 button 文本更容易处理。