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

时间:2013-08-08 11:24:34

标签: html button delimiter wrapping

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

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

2 个答案:

答案 0 :(得分:1)

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

Updated jsFiddle


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

jsFiddle (参见编辑)

(Source)

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

答案 1 :(得分:0)

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

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

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