设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap

30秒讲完

通常需要设置文本溢出的地方使用这三句css
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
并且设置一个宽度以后可以获得超过宽度的文本进行…省略

但是有时候会出现页面宽度变窄以后不能够使得元素自适应缩小

页面结构打乱

替代

可以将white-space: nowrap;text-overflow;删除
使用-webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical;替代
可以实现根据父元素宽度自适应缩放
而且-webkit-line-clamp: 1;可以根据值变化选择几行内容多余省略

讲完结束

设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap相关推荐

设置单行文本溢出隐藏
单行文本溢出隐藏 /* 单行文本溢出隐藏,省略号代替 */display: block;white-space: nowrap;overflow: hidden;text-overflow: elli ...
单行文本溢出省略和多行文本溢出省略
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
多行文本溢出省略和单行文本溢出省略
记录下大神文章的地址,下次用的时候方便 http://www.daqianduan.com/6179.html 单行: overflow: hidden; text-overflow:ellipsis ...
[前端] 实现单行文本溢出和多行文本溢出省略
项目中经常会用的标题或摘要超出省略的功能,从网找了一些参照,在这里写一下,希望对你有帮助... 一.单行文本溢出省略 CSS样式: <style>.box {width: 120px;he ...
css-设置单行文本溢出省略号，使用overflow：hidden属性之后的出现的问题几解决办法。
1 设置单行文本溢出后出现省略号必要:需要设置固定宽度,不允许换行 width: 200px; white-space: nowrap; overflow: hidden; text-overflo ...
Web实现：单行文本超出省略文本溢出省略
/* text-overflow有两个有效值: clip:默认值,表示在内容区域的极限处截断文本: ellipsis:表示用一个省略号("-")来表示被截断的文本. 强制不换行 w ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
小技巧！CSS 整块文本溢出省略特性探究
大家好,我是若川.欢迎加我微信 ruochuan12,长期交流学习.今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节.点击下方卡片关注我,或者查看源码系列文章. 文本超长打点我们都知 ...
【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap

30秒讲完

替代

讲完结束

设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap相关推荐

最新文章

热门文章