——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. window.location.href url含中文乱码问题

    (1).页面中先对中文进行编码. 如:window.location.href = url+"&groupName=" + encodeURI(encodeURI(grou ...

  2. CentOS上安装oracle11g报错处理

    ​ 最近,在处理oracle gateway的报错问题.只因个人的测试环境已经迁移到docker上了,又懒得装一套环境就直接在机器上安装oracle11g.今天分享的故事就从此开始-- 运行环境 项目 ...

  3. 【tp5.1】七牛云上传图片

    composer安装: composer require qiniu/php-sdk 配置使用: 在tp5.1的配置文件app.php中配置七牛云的参数 'qiniu' => [ 'access ...

  4. thinkphp phpmailer邮箱验证

    thinkphp 关于phpmailer的邮箱验证 一  . 登陆自己的邮箱,例如:qq邮箱.登陆qq邮箱在账户设置中开启smtp服务: 之后回发送一个授权码 , 这个授权码先保存下来,这个授权码在后 ...

  5. YII2 不通过composer安装Ueditor编辑器

    今天用composer安装Ueditor,一直下载失败,不知道为什么,所以就手动安装了一下.记录一下安装步骤 GitHub地址 https://github.com/BigKuCha/yii2-ued ...

  6. Python实现多属性排序

    Python实现多属性排序 多属性排序:假如某对象有n个属性,那么先按某规则对属性a进行排序,在属性a相等的情况下再按某规则对属性b进行排序,以此类推. 现有对象Student: class Stud ...

  7. No configuration found for this host:al

    想尝试多个agent来进行传输数据其中的一个配置文件如下: al.sources = r1al.sinks = k1al.channels = c1 al.sources.r1.type = avro ...

  8. hive的desc命令

    desc命令 desc 命令是为了展示hive表格的内在属性.例如列名,data_type,存储位置等信息.这个命令常常用在我们对hive表格观察之时,我们想要知道这个hive各个列名(基于这些具体列 ...

  9. Python自动化运维——IP地址处理模块

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 模块:IPy 功能:辅助我们高效的完成IP的规划工作 安装: wget https://pypi.python.o ...

  10. DESCRIBEFIELD

    実行時データ型識別.略語は RTTI です.プログラム実行時にデータ型を識別して処理を行う仕組みです.. DESCRIBE FIELD命令を使用 DESCRIBE FIELD命令を使用して.変数のデー ...