0

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

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

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

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

4

2 回答 2

1

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

更新了 jsFiddle

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

jsFiddle（见编辑）

（来源）

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

于 2013-08-08T12:29:41.070 回答
0

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

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

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

于 2013-08-08T20:09:21.543 回答