如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow ,其属性规定当文本溢出包含元素时发生的事情。语法如下:
text-overflow: clip|ellipsis|string;
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>demo</title>
<style>
div{
white-space: nowrap; //规定段落中的文本不进行换行
text-overflow:ellipsis;
overflow:hidden;
}
div:hover{
overflow: visible;
font-weight: bold;
}
</style>
</head>
<body>
<div style="width:100px;border:1px solid red;">
<a href="#">文本文本文本文本文本文本文本</a>
</div>
</body>
</html>
如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)的更多相关文章
- CSS控制文字只显示一行 超出部分显示省略号
<p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; over ...
- CSS控制文字只显示一行,超出部分显示省略号
<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...
- HTML+css 文字只显示一行
电脑端 设置行高,超出隐藏 p{ width: 80%; height: 16px; line-height: 16px; display: block; overflow: hidden; text ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- ScrollView中嵌套GridView,ListView只显示一行的解决办法
转载:http://blog.csdn.net/luohai859/article/details/39347583 关于为什么只显示一行,个人理解是:如果单独使用GridView和ListView, ...
- RecyclerView, ListView 只显示一行内容 问题解决
Adapter 中的data有多行,但是RecyclerView只显示一行. 原因出在item的layout xml, 用了自动生成的RelativeLayout, 她的默认高度height属性是ma ...
- ScrollView嵌套ListView只显示一行
错误描述 ScrollView嵌套ListView中导致ListView高度计算不正确,只显示一行. 解决方法 重写ListView的onMeasure方法,代码如下. @Override publi ...
- NestedScrollView嵌套ListView时只显示一行的解决方法
在使用CoordinatorLayout和AppBarLayout实现嵌套滑动的时候,出现listview没有嵌套滑动: 如果要实现嵌套滑动,则需要添加NestedScrollView,但是结果发现l ...
- ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)
ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...
随机推荐
- 【转】LDA-linear discriminant analysis
分类问题也可以用降维来理解,比如一个D维的数据点x,我们可以采用下面的映射进行线性的降维, y=θTx 在计算出y后,就可以选择一个阈值h,来进行分类.正如我们在前面的PCA模型中看到的,降维会有信息 ...
- [LUOGU] P3952 时间复杂度
其实,也没那么难写 这种模拟题,仔细分析一下输入格式,分析可能的情况,把思路写在纸上,逐步求精,注意代码实现 主要思路就是算一个时间复杂度,和给出的复杂度比较,这就先设计一个函数把给出的复杂度由字符串 ...
- PHP将unicode转utf8最简法
最近开发时遇到Unicode编码问题,找了半天才知道PHP并没有Unicode转码函数,终于发现用一行PHP代码解决的方案: $str = '{"success":true,&qu ...
- 阿里大鱼短信发送 FOR DT
//增加了参数$action 来标志发送的是什么短信 注册短信 验证码短信 提示短信等 function send_sms($mobile, $message, $word = 0, $time = ...
- verilog $fopen 函数的小缺陷
system task $fopen 的argument 为1.文件名字(可以包含具体的文件路径但是注意用)2.打开方式比如"r"."w"."a&qu ...
- 用decimal模块增加python的浮点数精度
浮点数python默认是17位精度,也就是小数点后16位(16位以后的全部四舍五入了),虽然有16位,但是这个精度越往后越不准. 如果有特殊需求,需要更多的精度,可以用decimal模块,通过更改其里 ...
- Tourists Gym - 101002I LCA——dfs+RMQ在线算法
LCA(Least Common Ancestors),即最近公共祖先,是指这样一个问题:在有根树中,找出某两个结点u和v最近的公共祖先(另一种说法,离树根最远的公共祖先). 知识需求:1)RMQ的S ...
- UVA1589——xiangqi
开始碰到这个题时觉得太麻烦了直接跳过没做,现在放假了再次看这个题发现没有想象中那么麻烦,主要是题目理解要透彻,基本思路就是用结构体数组存下红方棋子,让黑将军每次移动一下,看移动后是否有一个红方棋子可以 ...
- 百度地图的API接口----多地址查询和经纬度
最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了,目前测试Chrome和360浏览器可以正常使用. <!DOCTYPE ...
- Diango路由控制
路由的格式: #路由配置的格式: urls.py里面写 from diango.conf.urls import url urlpatterns = [ url(正则表达式,views视图函数,nam ...