超出区域文字显示为省略号或者剪切效果——CSS的生僻操作
每门语言总有那么一些不太常用,却又不可或缺的语法操作。下面说一下,在HTML文件中,如何设置用 “省略号” 和 “剪切” 代替大量文字的效果。
以下是HTML的主体代码:

首先,中文是默认行末自动换行的。而英文和数字,主流浏览器一般默认为空格处换行。上图,我们先编写2段字符。然后CSS代码见下图:

见上图,设置div的大小使其装不下字符,然后对字符设置不断行。这样文字会超出div显示,然后overflow:hidden;让超出部分隐藏不显示,
然后 text-overflow:ellipsis;或者 text-overflow:clip;分别设置隐藏部分用 省略号或剪切效果显示。
超出区域文字显示为省略号或者剪切效果——CSS的生僻操作的更多相关文章
- css把超出的部分显示为省略号的方法兼容火狐
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- css怎样让HTML中超出的内容显示为省略号
文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法第一种.用程序开截取字符长度,这个其实也是可以的.第二种就是接下来分享的内容,用css样式来做,话也 ...
- CSS小技巧-怎样让每行多余的文字显示文省略号?
1.white-space:nowrap 如果是中文,则需要设置行末不断行 2.overflow:hidden 设置超出控件范围隐藏 3.text-overflow:ellipsis
- CSS控制文字显示一行,超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...
- js实现多行文本超出一定字数显示省略号功能
最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...
- td默认文字超出后显示..,点击tr时td文字显示完整
做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...
- 微信小程序之canvas 文字断行和省略号显示
文字的多行处理在dom元素中很好办.但是canvas中没有提供方法,只有通过截取指定字符串来达到目的. 那么下面就介绍我自己处理的办法: wxml: <canvas canvas-id='wor ...
- Android 文字过长TextView如何自动截断并显示成省略号
当用TextView来显示标题的时候,如果标题内容过长的话,我们不希望其换行显示,这时候我们需要其自动截断,超过的部分显示成省略号. 如下图所示,标题过长,自动换行了,显示不是很好看. 这时候我们需要 ...
随机推荐
- C,C++,VC++有什么区别
C语言是一种古老而又经久不衰的计算机程序设计语言,大约诞生于上个世纪60年代.由于它的设计有很多优点,多年以来深受广大程序设计人员的喜爱,并逐渐淘汰了很多其它程序设计语言.我们平时使用的大多数软件都是 ...
- Angular - - ngApp、ngBind、ngBindHtml、ngNonBindable
对于ng-系列的指令,每篇文章写2-5个吧,不然显得文章好短.... ngApp 使用这个指令自动启动一个AngularJS应用.ngApp指令指定了应用程序的根节点,通常会将ngApp放置在网页的根 ...
- 函数返回值 return
return 返回值 (后面跟的是数据类型) // 数字.字符串.布尔.函数.对象(元素.[].{}.null).未定义return:返回值 1)函数名+括号:fn1() ==> return ...
- node源码详解 (一)
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource1 本博客同步在https://cnodejs.o ...
- Condition源码分析
转:http://www.nbtarena.com/Html/soft/201308/2429.html Condition的概念 大体实现流程 I.初始化状态 II.await()*作 III.si ...
- C#进阶系列——使用Advanced Installer制作IIS安装包(一:配置IIS和Web.config)
前言:大过年的,写篇文章不容易,还是给自己点个赞~~年前找了下.net安装包的制作方法,发现Visual Studio自带的制作工具使用起来非常麻烦,需要单独下载安装包,并且什么激活认证等等屁事相当麻 ...
- WinForm 控件(上)
窗体的事件 每一个窗体都有一个事件,这个窗体加载完成之后执行哪一段代码 位置:1)右键属性→事件→load 双击进入 2)双击窗体任意一个位置进入 删除事件:先将事件页面里面的挂好的事件删除,再删后台 ...
- Linux下JDK安装
最近在学习linux,倒腾了半天.终于把jdk安装好了,写篇博客记录下来,关键是jdk环境变量的配置和保存了 我用的SecureCRT连接linux,然后再在SecureCRT上敲命令,关于Secur ...
- 源码(05) -- java.util.AbstractCollection<E>
java.util.AbstractCollection<E> 源码分析(JDK1.7) ------------------------------------------------- ...
- Function.caller、arguments.caller、argument.callee
caller.callee是与javascript函数相关的两个属性,今天来总结下. Function.caller caller是javascript函数的一个属性,它指向调用当前函数的函数,如果函 ...