css中a标签内容超出最大字数隐藏处理

问题：a标签内容超出最大字数显示问题

1.超出是最后显示为“...”

2.鼠标放在上面显示完整内容

3.点击新窗口打开链接内容

解决方法：

css部分：

.list{font:Georgia, "Times New Roman", Times, serif;font-size:14px;width:200px;display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;}

html部分：

<a class="list" title="我是1111111111111111111111111111111111111111111111111111" href="http://localhost" target="_blank">我是1111111111111111111111111111111111111111111111111111</a>

时间： 2024-10-14 19:15:27

css中a标签内容超出最大字数隐藏处理的相关文章

CSS中A标签断字不换行问题（基础知识）

CSS中A标签断字不换行问题样式表中A标签自动换行的问题,有时候需要做一个列表,比如学校的列表,部门的列表,但有的时候会有问题,比如出现一个完整的学校名称却自动换行,但如果不想让他自动换行该怎么办呢,其实你只要在样式表中加上几句话就行了,如下 .ArtTagList a{width:auto;height:auto;float:left;display:block;white-space:nowrap;margin-left:0px;margin-right:0px;}

内容超出了就隐藏超出部分的后面带（省略号）... ，如果没有超出就正常显示后面不带省略号

text-overflow: ellipsis要配合下面两个css样式使用效果是当一个固定宽的容器中 (设置了 overflow:hidden 与white-space:nowrap不让超出本分换行)的内容超出了就隐藏超出部分的后面带(省略号)... , 如果没有超出就正常显示后面不带省略号 white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

table中td的内容超出自动换行

给td设置css样式: 1. td { word-wrap: break-word; } 2. td { overflow-wrap: break-word; } 以上两种样式都可以一.设置之前 td中的内容超出边框二.设置之后

CSS中的一些内容总结

一.选择器 1.选择器的分组:一个Style可以对多个选择器生效,只用在不同的选择器中间加入逗号即可.如: h1,h2,h3,h4,h5,h6 { color: green; } PS:CSS规定,所有子元素继承父元素的属性.但是对子元素的Style做修改后,就会覆盖父元素的属性. 2.派生选择器通过元素的上下文关系去选择元素,不同级别的元素使用空格隔开即可,表示选择空格前的元素中后代元素为空格后的内容的元素.如: li strong { font-style: italic; font-we

HTML中head标签内容介绍

在利用VScode编写代码时,我们利用VScode的!键自动生成头部代码时,会自动生成以下内容 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=&q

去除HTML中的标签内容

采集后的数据都带有'<>'html标签: <img src="http://i4.hdfimg.com/www/images/giftrans/3d/da/7b/18414.gif" border="0"/><span class='WmoJPQM2AzpQMA'>科研<span class='WmoJPQM2AzhQMQ'>最早和<span class='WmoJPQM2AzxQNw'>一项<spa

12 css中重要性标签

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> p{color:red!important;} p.first{color:green;} </style> </head> <body> <h1&

js实现超出一定字数隐藏并用省略号"..."代替，点击后又可进行展开和收起，

原来简单阐述:放两个一模一样的div,把你要展示的文字放进去.页面初始化的时候,第一个div展示,第二个 div隐藏,就是这么简单.(ps:可以直接复制代码到你自己项目中,查看效果) 样式部分(记得引用一下jquery,如果你喜欢手写原生的js当我没说)********** <style> .ms-cont2{display: none;} .ms-cont2,.ms-cont1{cursor: pointer;} </style> body部分********** <div

解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overflow:hidden;属性也不行:最后找的的解决方案如下: table{ table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ width:100%; word-break:keep-all;/*