css里a标签所有属性都是超过一定宽度后隐藏并且变成省略号。

2025-01-02 07:34:21

推荐回答（5个）

回答1：

1、首先第一步就是进行按正常方法，a标签里的链接默认都是使用get方法去请求的。不能直接设置使用put方法去请求。

2、接着就是进行改a标签，添加一个id，为了附加事件。href属性改为data-href，这是为了不直接提交请求即可。

3、然后就是进行为这个a标签添加一个点击事件，如下图所示。

4、接着就是进行先获得工标签要请求的链接，使用data方法取对应的属性，代码应该为：var link = $(this).data("href")即可。

5、然后就是进行发出一个ajax请求，请求的目标就是得到的链接。

6、然后就是进行在type属性里，这时候将其设置为要求的put方法。

7、最后就是请求后，如果需要在发送请求后把页面转向到新的页面，然后就在success回调里把页面重定向到新的页面即可。

回答2：

1、新建一个html页面。

2、在html代码页面找到标签，在标签里创建一个

标签，然后输入显示的内容并添加一个class类为 class="cont"。

3、找到标签，在这个标签下面创建一个<style>标签，在<style>标签里设置class为cont的样式内容超出后为隐藏<style>.cont{overflow: hidden;/*内容超出后隐藏*/}</style>。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F1f178a82b9014a90e1fbadeaa6773912b21beea4%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/1f178a82b9014a90e1fbadeaa6773912b21beea4"></p> <p>4、为cont类添加内容显示为一行：white-space: nowrap; ，内容超出后显示为省略号：text-overflow: ellipsis; 。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F3bf33a87e950352ab4a4ce5f5c43fbf2b3118ba4%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/3bf33a87e950352ab4a4ce5f5c43fbf2b3118ba4"></p> <p>5、保存好代码后使用浏览器查看效果。</p> <p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F5366d0160924ab1866f50b603afae6cd7a890b82%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/5366d0160924ab1866f50b603afae6cd7a890b82"></p></p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答3：</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>应该是可以的，但是有可能你是有了重复的css的定义，使得一些设置被覆盖了，另外，你的所谓的引用a标签的div或者span，是怎么引用的？如果是在a标签内部，那这些可能就没有用了</p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答4：</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>你这样写在IE下面可以运行，但在火狐、谷歌下运行兼容性有问题<br>个 a 加上个 display:block 试试<br><br>a{ width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; display:block;}</p> </div> </div> <div class="clear"></div> </div> <div class="wdhdnr"> <div class="huidanrtop"> <div class="wdhuidaxinx"> <div class="wdhuidaxm">回答5：</div> </div> </div> <div class="clear"></div> <div class="wdhuidanrmid"> <div class="zuijiacont"> <p>最上面的a需要定义display:block<br>之后每个用到a的地方都要指定width像素值<br>比如 .foo a { width: 100px; }</p> </div> </div> <div class="clear"></div> </div> </div> </div> <div class="wendaright"> <div class="wdluluerwema"> <div class="wdxgwttop">相关问答</div> <div class="wdxgwtnr"> </div> <div class="clear"></div> </div>  <div class="wdluluerwema"> <div class="wdxgwttop">最新问答</div> <div class="wdxgwtnr"> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/435624366.html">内涵图为什么打不开我把后缀名改成RAR之后就说文件已损坏是什么意思</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/232272614.html">结婚时检查是知得乙肝了，不知上小三阳还大三阳。请问大家去医院要检查那几项啊？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/600240427.html">小米手机充满电为什么12小时就没电了换了电池也一样</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/526437340628608805.html">一个正方形的面积是25平方厘米，它的边长是多少厘米，周长是多少厘米？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/647261308818889365.html">努比亚z7max内置的是什么输入法？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/501933860.html">我是二本学院的大一新生学的是光信专业想考研然后具体想考厦门大学的光学工程这个专业好考吗？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/421872837.html">如果企业已经有了MDM，或者从物料组编码本身就能区分大中小类，那么在SAP中设置物料分类还有啥意义？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/181640397822470684.html">三星A8手机拍照怎么设置显示日期和时间？</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/383877387.html">Style的中文含义是什么?</a></div> </div> <div class="wdxgwtcont"> <div class="wdxgtitle"><a href="https://www.g230.com/1547515136000565187.html">中国移动取消漫游费是怎么回事？</a></div> </div> </div> </div> </div> <div class="clear"></div> <div class="footer">  <div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://www.g230.com/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div> <div class="dibu"> <div class="dibu"> </div> </div> <div class="banquan"> <p>内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024</p> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?78733b427b0a9dce19688d903e89fc12"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>

css里a标签所有属性都是超过一定宽度后隐藏并且变成省略号 。

css里a标签所有属性都是超过一定宽度后隐藏并且变成省略号。