文档章节

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
css防止ul下的li换行(li超出宽度变成…)代码

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

功夫panda
2013/01/09
0
2
CSS超级压缩工具-命令行版v1.0

功能简述: 纯命令行,无界面! 删除CSS注释。对url(..)及src='..'的路径进行URL编码。删除多余的空白字符。颜色中使用英文单词自动转换为十六进制的颜色值,并且进行简化处理,十六进制颜色...

edielei
2012/12/29
674
13
10个CSS简写及优化技巧

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

九夏光年
2017/05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day96-20180923-英语流利阅读-待学习

英国王子也不看好人工智能,理由却和霍金不同 Daniel 2018-09-23 1.今日导读 2016 年 3 月 9 日至 15 日,世界围棋冠军李世石与谷歌研发的计算机围棋程序 AlphaGo 进行人机大战并以 1 比 4 ...

飞鱼说编程
11分钟前
0
0
今天在码云遇到一个很有意思的人 for Per.js

今天在码云遇到一个很有意思的人,他在我的Per.js项目下面评论了一句,大意为“你试试这句代码,看看速度到底是你快还是Vue快”【当然,这个评论被我手残不小心删掉了...】。 然后我就试了,...

Skyogo
16分钟前
16
0
Java -------- 首字母相关排序总结

Java 字符串数组首字母排序 字符串数组按首字母排序:(区分大小写) String[] strings = new String[]{"ba","aa","CC","Ba","DD","ee","dd"}; Arrays.sort(strings); for (int i ...

切切歆语
18分钟前
0
0
还在用 Git 的 -f 参数强推仓库,你这是在作死!

最近,美国一个程序员因为同事不写注释,代码不规范,最严重的是天天使用 git push -f 参数强行覆盖仓库,该程序员忍无可忍向四名同事开抢,其中一人情况危急!!! 不写注释、代码不规范是一...

红薯
31分钟前
281
0
NPM报错终极大法

所有的错误基本上都跟node的版本相关 直接删除系统中的node 重新安装 sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*} 重新安装 $ n lts$ npm...

lilugirl
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部