——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. Block代替delegate,尽量使用block,对于有大量的delegate方法才考虑使用protocol实现.

    Block代替delegate,尽量使用block,对于有大量的delegate方法才考虑使用protocol实现. 1.Block语法总结及示例如下:         //1.普通代码块方式bloc ...

  2. Webpack学习笔记九 webpack优化总结

    webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...

  3. Javascript中的this对象

    对于this的使用,我们最常遇到的主要有,在全局函数中,在对象方法中,call和apply时,闭包中,箭头函数中以及class中: 我们知道this对象是在运行时基于函数的执行环境绑定的,在调用函数之 ...

  4. Xadmin使用二

    1:修改site-title和site-footer,增加菜单折叠效果 在adminx.py中增加下面代码: class GlobalSetting(object): # 设置Title site_t ...

  5. 洛谷P1731 [NOI1999]生日蛋糕(爆搜)

    题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...

  6. Java 的标识接口作用

    原文地址:标识接口 作用作者:feisong 时间:2019-01-2315:49:35 标识接口是没有任何方法和属性的接口.标识接口不对实现它的类有任何语义上的要求,它仅仅表明实现它的类属于一个特定 ...

  7. Linux 下文件压缩与解压命令详解

    tar 命令 -c 建立压缩档案 -x 解压 -t 查看内容 -r 向压缩归档文件末尾追加文件 -u 更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中 ...

  8. MAthJax入门教程（五分钟上手）

    最近在研究,在页面中显示一些数学公式.搞得我很头疼. 据说MathJax会统一这已领域.所以去学了学.网上教程特别多.繁杂. 说的清楚的特别少. 我是这么跑通的,: 1.在官网下载代码地址为:http ...

  9. vue入门笔记

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...

  10. js中split()和join()的用法

    Split()方法:把一个字符串分割成字符串数组 如上所示:把字符串a按空格分隔,得3个字符串数组. 在如: var  a=”hao are you”  a.split(“”);  得到[h,a,o, ...