——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. Excel 批量重命名照片

    理历史照片的时候发现,用文件夹进行分类之后,还有很多照片,如果继续分类,就会导致每个文件夹照片过少,查看不便,但是如果不分类,手机原始的命名方式没有办法满足查看需求,故而,产生了对照片进行批量重命名的 ...

  2. SpringBoot学习15：springboot异常处理方式5(通过实现HandlerExceptionResolver类)

    修改异常处理方式4中的全局异常处理controller package com.bjsxt.exception; import org.springframework.context.annotati ...

  3. 【原创】os.chdir设置的工作路径和sys.path之间到底是个啥关系？

    转载请注明出处:https://www.cnblogs.com/oceanicstar/p/9390455.html   直接放上测试后的结论(测试代码和截图过多,有兴趣的小伙伴可自己测试,未来看情况 ...

  4. git 错误 RPC

    remote: Enumerating objects: 3772, done. error: RPC failed; curl 18 transfer closed with outstanding ...

  5. jquery图片滚动animate.css

    @charset "UTF-8"; /*!Animate.css - http://daneden.me/animateLicensed under the MIT license ...

  6. 使用CSS3制作首页登录界面实例

    响应式设计 在这个页面中,使用下面3点来完成响应式设计 1.最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容.: 2.margin : 30px auto; 使其保持时刻居中 ...

  7. Linux之MariaDB

    MariaDB数据库的起源 MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源的潜 ...

  8. 吐血分享：QQ群霸屏技术教程之霸屏实施细则

    小号,再不养,成本抗不住了;QQ群,再不玩,真的就玩不动啦. 霸屏系列,坚持下来差不多10来篇,最近更新的几篇,算是霸屏系列的更新版,毕竟相当的规则变动了. 经营自己,是一种前瞻能力,霸屏十篇,有多少 ...

  9. JZOJ 5941. 乘

    Sample Input Sample Input1: 4 3 9 6 5 8 7 7 Sample Output Sample Output1: 0做法(转自JZOJ):考虑 a 是定值, 而 b ...

  10. uva 540 - Team Queue（插队队列）

    首发:https://mp.csdn.net/mdeditor/80294426 例题5-6 团体队列(Team Queue,UVa540) 有t个团队的人正在排一个长队.每次新来一个人时,如果他有队 ...