文档章节

css 智能省略(剪切)多余部分的字体

issac宝华
 issac宝华
发布于 2016/11/28 18:30
字数 162
阅读 15
收藏 0

主要属性:

text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本。

white-space: nowrap;     // 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

overflow: hidden;        // 将超出部分隐藏

 

ps:模拟块级元素

  • 需要块级元素,或者 
  • 限制文字显示的宽度:width。

 

例子:

<style type="text/css">

    .ellipsis{ 

        text-overflow: ellipsis;

        white-space: nowrap;

        overflow: hidden;

        display: inline-block;

        vertical-align: middle;

        width: inherit; 

    }

</style>

<div style="width: 150px;border: 1px solid red;margin-top: 100px;margin-bottom: 100px;">

    <span class="">生活就像海洋,只有意志坚强的人才能到达彼岸</span>

</div>

使用ellipsis类前:

使用ellipsis后:

© 著作权归作者所有

共有 人打赏支持
issac宝华
粉丝 9
博文 140
码字总数 34397
作品 0
珠海
私信 提问
【CSS实践】——div和table中容纳长文本设置省略值...

前言 积累一下css代码,关于html中文本过多,不想全部展示,多余部分被省略号替代 内容 关于table中td中文本超过td大小设置省略值 展示效果 设置一个table中td文本过长设置省略值,必须 一....

changyinling520
04/26
0
0
01-UI基础-02UILable

继承关系 一、初始化 二、属性 2.1、text(标签文本) 设置标签显示文本。 2.2、attributedText(标签属性文本) 设置标签属性文本。 2.3、font(字体) 设置标签文本字体。默认是系统自带字体...

口十耳
2016/01/04
10
0
bootstrap中表格行高应该是为自适应高度吧,现在我一行高度特别高,一行有10行字体,我想把行高设置固定,多余的字体省略的该怎呢操作呢

bootstrap中表格行高应该是为自适应高度吧,现在我一行高度特别高,一行有10行字体,我想把行高设置固定,多余的字体省略的该怎呢操作呢

pie-dog
2017/06/21
492
3
css防止ul下的li换行(li超出宽度变成…)代码

在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里 分别有4个li 这个4个l...

功夫panda
2013/01/09
0
2
10个CSS简写及优化技巧

10个CSS简写及优化技巧 CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。 下面介...

九夏光年
2017/05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
22分钟前
1
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
30分钟前
1
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
36分钟前
1
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
59分钟前
2
0
exportfs命令, vsftp搭建ftp服务

exportfs命令 当修改/etc/exports文件后,更改的内容是不会立即生效的。如果重启nfs服务,会导致客户端重启期间的请求是挂起等待的,可以把客户端的挂载umount进行卸载后,再重启nfs服务,但...

野雪球
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部