HTML5 自动显示和隐藏文字，hidden属性，为何以下方法不能实现？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 自动显示和隐藏文字，hidden属性，为何以下方法不能实现？相关的知识，希望对你有一定的参考价值。
通过两个互斥单选按钮，实现自动显示或隐藏p段落里边内容。其它方法也能实现，但是下边这种方法为何不行？（为每个按钮添加了一种方法） <script type="text/javascript" async="true"> function qq_onclick() var text_2=document.getElementById("text_1"); text_2.setAttribute("hidden","false"); function qq_close() var text_1=document.getElementById("text_1"); text_1.setAttribute("hidden","true"); </script> <input type="radio" name="qq" value="1" id="che_1" onClick="qq_onclick()">显示 <input type="radio" name="qq" value="0" id="che_0" checked="true" onClick="qq_close()">隐藏 <p id="text_1"> 这是一段可以显示和隐藏的文字 </p> 附上一种正确代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hidden属性的使用</title> <link href="css.css" rel="stylesheet" type="text/css"> <script type="text/javascript" async="true"> function Rdo_Click(v) var blnShow=(v)?false:true; var strArt=document.getElementById("art"); strArt.setAttribute("hidden",blnShow); </script> </head> <body> <h5>元素的隐藏属性</h5> <nav style="padding-top:5px;padding-bottom:5px"> <input type="radio" id="rdoHidden_1" onClick="Rdo_Click(1)" name="rdoHidden" value="1" checked="true"/>显示 <input type="radio" id="rdoHidden_2" onClick="Rdo_Click(0)" name="rdoHidden" value="0"/>隐藏 </nav> <article id="art" class="p3_8"> 大家好，我是雨夜，欧耶。 </article> </body> </html>
参考技术A <p>hidden属性在html5中，只要存在，就是隐藏效果，而不论值为多少</p><p>要显示元素，要删除hidden属性，而不是设置为false</p>
<script
type="text/javascript"
async="true">
function
qq_onclick()
var
text_2=document.getElementById("text_1");
text_2.removeAttribute("hidden");
function
qq_close()
var
text_1=document.getElementById("text_1");
text_1.setAttribute("hidden",true);
</script>
文字超出容器长度自动隐藏并且显示省略号
在做网站的过程中我们会遇到这样一种情况，在新闻列表中一行只显示一条新闻，但是新闻标题的长短是不一样的，如果新闻标题过长会自动换行，当然可以使用溢出隐藏属性，但是使用溢出隐藏又会显得比较突兀，现在给大家提供以下解决方法
<style>
p { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>只需要在原先写好的样式中加入上述代码即可
以上是关于HTML5 自动显示和隐藏文字，hidden属性，为何以下方法不能实现？的主要内容，如果未能解决你的问题，请参考以下文章