text-overflow文本溢出隐藏“...”显示
一、文本溢出省略号显示
1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示)
定义此属性有四个必要条件:1)须有容器宽度:width:value;
2)强制文本在一行内显示:white-space:nowrap;
3)溢出内容隐藏:overflow:hidden;
4)溢出文本显示“...”:text-overflow:ellipsis;
2.溢出属性:overflow:visible(默认值,不会被隐藏)
hidden(内容隐藏)
auto(如果内容隐藏,则浏览器内显示滚动条)
scroll(内容会隐藏并显示滚动条)
inherit(规定应该从父元素继承overflow属性的值)
注:overflow-x:hidden;隐藏横向滚动条
overflow-y:hidden;隐藏纵向滚动条
3.空余空间属性 (该属性用来设置如何处理元素内的空白;):white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit
normal(默认值,空白会被浏览器忽略)
nowrap(文本不会换行,文本会在同一行上继续,直到遇到标签<br />为止)
pre(空白会被浏览器保留,其行为方式类似HTML中的pre标签)
pre-wrap(保留空白符序列,但是正常的进行换行)
pre-line(合并空白符序列,但是保留换行符)
inherit(规定应该从父元素继承White-space属性的值(ie浏览器不支持此属性值))
text-overflow文本溢出隐藏“...”显示的更多相关文章
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形
元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...
- 设置text-overflow文本溢出隐藏时的对齐问题
设置text-overflow: ellipsis后引起的文本对齐问题 最近在做网页的时候用到了文本溢出隐藏的功能,但是出现了一些小问题,下面先放上示例代码吧. <p> <span ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- css实现文本溢出用...显示
文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...
- css 文本换行 文本溢出隐藏用省略号表示剩下内容
正常文本的显示 <style> p{ width: 300px; box-shadow: 0 0 10px #ccc; padding: 0 20px; margin: 20px 100p ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- CSS---解决内容过多就会出文本溢出(显示在区域外面,不换行的情况)
当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word- ...
- 【UWP】仅在TextBlock文本溢出时显示Tooltip
前言 这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考. 通常,我们使用ToolTip最简单的方式是这样: <TextBlock Text="Test&qu ...
随机推荐
- webpack安裝和卸載
webpack安裝和卸載 安裝: 先裝好node和npm: 安裝package.json:進入到根目錄,運行npm init 新建全局webpack:cd退到全局目錄,運行npm install -g ...
- centos无网络问题
- 【python练习题】程序13
#题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153= ...
- 树&图 记录
A - Lake Counting POJ - 2386 最最最最最基础的dfs 挂这道题为了提高AC率(糖水不等式 B - Paint it really, really dark gray Cod ...
- python数据类型知识整理
python数据类型种类 int数字.bool布尔值.dict字典.tunple元组.set集合.list列表.字符串 int数字 #常用来进制转换 num = 11 #转化成2进制 bin_num ...
- 趣味网站5个,小鸡词典/中国配色/名著地图/海洋之音/LOGO设计
一.小鸡词典 很多流行的词语还没有收录到各大词典,却可以在小鸡词典搜索到,小鸡词典是最全的网络流行词语词典. 不少词条搞笑无厘头,撰写词条还会获得红包. 访问地址:https://jikipedia. ...
- I - Tunnel Warfare HDU - 1540 线段树最大连续区间
题意 :一段区间 操作1 切断点 操作2 恢复最近切断的一个点 操作3 单点查询该点所在最大连续区间 思路: 主要是push_up : 设区间x 为母区间 x<<1 ,x< ...
- 基于FPGA的16阶级联型iir带通滤波器实现
警告 此文章将耗费你成吨的流量,请wifi下阅读,造成的流量浪费本人不承担任何责任.初版源代码获取(请勿用作他用,仅供学习):https://gitee.com/kingstacker/iir.git ...
- 【XSY1262】【GDSOI2015】循环排插 斯特林数
题目描述 有一个\(n\)个元素的随机置换\(P\),求\(P\)分解出的轮换个数的\(m\)次方的期望\(\times n!\) \(n\leq 100000,m\leq 30\) 题解 解法一 有 ...
- python学习日记(2/3区别,环境,变量,数据类型以及简单习题)
Python2 与 python3 的区别: python2源码不标准,混乱,重复代码太多 python3统一标准,去除重复代码 python2的默认编码方式是ASCII码,不能识别中文.解决方法:在 ...