css 换行标题属性

ojsjcaue  于 2023-05-30  发布在  其他
关注(0)|答案(4)|浏览(190)

Firefox不会在atitle属性中换行:

<a title="longword"></a>

在这种情况下,有没有一种方法可以进行自动换行?我试过:

<a title="longword" style="word-wrap:break-word;"></a>

但它不起作用。
Chrome会自动换行。

xxslljrj

xxslljrj1#

不,您不能让Firefox偏离其呈现title属性值的方式;参见How can I use a carriage return in a HTML tooltip?
使用title属性创建的工具提示的可用性值得怀疑(字体很小,用户无法轻松增加;几秒钟后消失;等),因此它们(最多)适合于短的咨询标题(主要用于链接),这不需要 Package 。
对于较长的工具提示,请考虑使用CSS技术。或者直接把提示放到文本中。

voj3qocg

voj3qocg2#

值得一提的是,HTML5规范中唯一处理title属性中换行符的部分是:
如果title属性的值包含U+000A LINE FEED (LF)个字符,则内容将拆分为多行。每个U+000A LINE FEED (LF)字符代表一个换行符。
因此,您可以在服务器端拆分title属性,尽管这不太可能是理想的解决方案。或者,您可以尝试插入zero width spaces,尽管浏览器对此的支持也可能不一致。

wn9m85ua

wn9m85ua3#

© 2023 - 2019版权所有
只需像这样使用&#10;作为换行符。

<div title="A &#10; Leaf &#10; Falls &#10; with &#10; Loneliness">
  Hover your mouse here to see the native tooltip content.
</div>

这是一个工作演示。https://codepen.io/shrekuu/pen/dygLKGO

tnkciper

tnkciper4#

使用转义的n,例如:

<input type="text" title="first line \n second line"></input>

相关问题