——html代码

<divid="d1" title="鼠标放上显示的文字"></div>

——css代码

#d1{

width:300px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

/*兼容性*/

-webkit-text-overflow:ellipsis;

}

注：关键是给容器指定宽度，并且利用white-space:nowrap;属性阻止超出部分自动换行，省略号则是由text-overflow:ellipsis;实现的

文本太长，用省略号显示的css样式的更多相关文章

  1. 单行文字溢出和多行文字溢出省略号显示的CSS样式

    单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...

  2. css 样式控制文本过长实现省略号

    css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...

  3. 实现文本在标签内平均分布的css样式

    这里有一个容器,添加了一段文字,想让它们平均分布达到标签flex布局的效果,而不是靠左.靠右或者居中显示. 添加样式: text-align: justify; text-align-last: ju ...

  4. 【css】文本超出行数以省略号显示

    //超出2行省略overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webk ...

  5. 【我的Android进阶之旅】Android Studio查看Logcat时，如果一行Log太长如何换行显示？

    使用Android Studio一段时间了,还有很多小技巧没有掌握.今天又发现了一个比较好用的小技巧,这里分享出来. 1.Android Studio默认显示效果 比如我们用Logcat来查看打印的L ...

  6. HTML中超出文本使用省略号替代的CSS样式

    a{ display: block; /*定义显示形式*/ overflow: hidden; /*截取超出字符*/ text-overflow: ellipsis; /*超出字符以…代替*/ whi ...

  7. 百度echarts使用--y轴label数字太长难以全部显示

    问题: 今天遇到个小问题,我们系统前端呈现使用了百度echarts.在绘制折线图的时候,因为数字过大,导致显示出现了问题. 解决方案: 左边y轴的值默认是根据我们填充进去的值来默认分割的,因为原始值就 ...

  8. framework7中一行的字如果过多就省略号显示的CSS写法

    .order-info-title { text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hi ...

  9. Highcharts X轴名称太长，如何设置下面这种样式

      Highcharts所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过chart.inverted = true 可以让x, ...

随机推荐

  1. jquery获取父级元素、子级元素、兄弟元素

    1:$(this).parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...

  2. ABAP术语-Field

    Field 原文:http://www.cnblogs.com/qiangsheng/archive/2008/02/01/1061244.html Name in an ABAP program f ...

  3. ASP.NET成员资格和角色管理

    一.成员资格管理 1.成员资格管理模型 ASP.NET提供的成员资格管理功能,其核心是利用内置的成员库表(SQL Server).成员资格管理API(Membership.MembershipUser ...

  4. dom4j里面封装方法的操作

    animal.xml <?xml version="1.0" encoding="UTF-8"?><animal>   <cat ...

  5. 第五课：PHP echo和print 语句

    PHP  echo 和 print 语句 PHP 是通过 print 和 echo 语句来动态输出 HTML 内容,虽然 print 和 echo 语句两者的功能几乎是完全一样,但是还是有一点差别的. ...

  6. 爬虫之request模块高级

    一.cookie&session cookie:服务器端使用cookie来记录客户端的状态信息 实现流程: 执行登陆操作(获取cookie) 在发起个人主页请求时,需要将cookie携带到该请 ...

  7. stm32+lwip(四):网页服务器测试

    我是卓波,很高兴你来看我的博客. 系列文章: stm32+lwip(一):使用STM32CubeMX生成项目 stm32+lwip(二):UDP测试 stm32+lwip(三):TCP测试 stm32 ...

  8. 005---Python数据类型--字典

    字典 .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px ...

  9. （数据科学学习手札13）K-medoids聚类算法原理简介&Python与R的实现

    前几篇我们较为详细地介绍了K-means聚类法的实现方法和具体实战,这种方法虽然快速高效,是大规模数据聚类分析中首选的方法,但是它也有一些短板,比如在数据集中有脏数据时,由于其对每一个类的准则函数为平 ...

  10. Educational Codeforces Round 47 (Rated for Div. 2) ：B. Minimum Ternary String

    题目链接:http://codeforces.com/contest/1009/problem/B 解题心得: 题意就是给你一个只包含012三个字符的字符串,位置并且逻辑相邻的字符可以相互交换位置,就 ...