html – 如何使标签中的文本在仪表上可见

概述鉴于html <meter value="0.55" high="0.999" optimum="1"> <span class="meter-value">0.5491</span></meter> 我希望在仪表顶部显示文字0.5491.我尝试使用常用的CSS技术设置文本样式,但它根本不显示.在检查员中,无论我说多少,都说宽度和高度都是0 .meter-value { display: 鉴于HTML

<meter value="0.55" high="0.999" optimum="1">  <span >0.5491</span></meter>

我希望在仪表顶部显示文字0.5491.我尝试使用常用的CSS技术设置文本样式,但它根本不显示.在检查员中,无论我说多少,都说宽度和高度都是0

.meter-value {  display: block; wIDth: 50px; height: 20px;}

我做了更多尝试,这些例子都是简化的.我使用firefox进行测试,兼容性并不紧迫(内部项目).

我更喜欢“丑陋的hss”解决方案之上的“丑陋的CSS”解决方案.

更新:(总结一些评论)

似乎有一些魔力使得来自米的内容在firefox中不可见(包括来自米:: after,米跨度:: after和simillar组件的内容).所以问题是如果有一个CSS可以覆盖它.设置宽度,高度和能见度没有帮助.

解决方法 使用CSS3的:: after并将其添加到meter标签,如下所示.

meter::after {  content : "0.5491";}

这将显示仪表下方的文字.

更新

由于OP说他想要多个元素,所以更新了代码.将位置从绝对更改为相对,因此文本将始终相对于仪表

为了使它出现在仪表上,使用position：absolute来设置样式,并按如下方式给出top或margin-top-left

meter{  wIDth:100px;}meter::after { content : attr(value); top:-17px; left:40px; position:relative;}

有关:: after,访问@L_419_0@的更多参考

同样使用它,您可以删除span元素.

在这里,我们在CSS中使用attr()函数.在MDN阅读它

试试下面的代码片段

meter{  wIDth:100px;}meter::after { content : attr(value); top:-17px; left:40px; position:relative;}

<meter value="0.55" high="0.999" optimum="1"></meter><meter value="0.45" high="0.999" optimum="1"></meter><meter value="0.85" high="0.999" optimum="1"></meter><meter value="0.95" high="0.999" optimum="1"></meter><br /><meter value="0.55" high="0.999" optimum="1"></meter><meter value="0.45" high="0.999" optimum="1"></meter><meter value="0.85" high="0.999" optimum="1"></meter><meter value="0.95" high="0.999" optimum="1"></meter>

上面的代码不适用于firefox.这是一个已知的问题,:: after和::之前的伪作用仅适用于webkit浏览器.

对于firefox,请尝试以下代码(这是全局的.它适用于所有浏览器)

meter{  wIDth:100px;}span{}span::after { content : attr(data-value); top:0px; left:-70px; position:relative;}

<meter value="0.55" high="0.999" optimum="1"></meter><span data-value="0.55"></span><meter value="0.45" high="0.999" optimum="1"></meter><span data-value="0.45"></span><br /><meter value="0.55" high="0.999" optimum="1"></meter><span data-value="0.55"></span><meter value="0.45" high="0.999" optimum="1"></meter><span data-value="0.45"></span>

总结

以上是内存溢出为你收集整理的html – 如何使标签中的文本在仪表上可见全部内容，希望文章能够帮你解决html – 如何使标签中的文本在仪表上可见所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。