Question

我正在自动创建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;"

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

Answer 1

编辑：在Firefox中，这不起作用，但是，如果将应用于<button>元素而不是{{1元素。

Updated jsFiddle

您可以考虑使用CSS属性<input type="button">。这会强制文本换行，无论它是否有空格。

~~jsFiddle~~ （参见编辑）

(Source)

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

Answer 2

您无法在CSS中以任何准确度指定换行符行为。它基本上在浏览器的控制之下，并且因浏览器而异。从理论上讲，你可以在属性中插入U + 200B ZERO WIDTH SPACE字符，但它们似乎没有受到浏览器的尊重（可能是因为按钮文本渲染与普通文本渲染不同）。

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

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

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

2 个答案: