我正在自动创建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;"
),但在处理我正在使用的文件名时,这不是很有帮助。 是否有一种方法可以提供更详细的分界选项(也许空格可以被赋予最高优先级,下划线具有次优先级等等)? 有没有更合理的方法? 我感谢你提出的任何想法。
答案 0 :(得分:1)
编辑:在Firefox中,这不起作用,但是,如果将 应用于<button>
元素而不是{{1元素。
您可以考虑使用CSS属性<input type="button">
。这会强制文本换行,无论它是否有空格。
jsFiddle (参见编辑)
据我所知,没有CSS属性可以为文本中的不同分隔符赋予优先级。这可能必须通过JavaScript以某种方式实现。
答案 1 :(得分:0)
您无法在CSS中以任何准确度指定换行符行为。它基本上在浏览器的控制之下,并且因浏览器而异。从理论上讲,你可以在属性中插入U + 200B ZERO WIDTH SPACE字符,但它们似乎没有受到浏览器的尊重(可能是因为按钮文本渲染与普通文本渲染不同)。
正如@Tanner建议的那样,将文件名放在按钮之外是一种更好的方法,保持按钮文本非常短。这对可用性有好处。如果你有文件名的换行问题,当文件名显示为普通文本时,它们可以更好地解决;例如,U + 200B(​
)在指定允许的断点方面效果很好。
或者,只需创建文件名链接,因为这是button
真正用于的内容,除了此处使用的button
技术在禁用JavaScript时不起作用。如果需要,您可以像使用CSS的按钮一样设置链接样式 - 内容仍然是文本,其中换行问题比button
文本更容易处理。