基本概念
头疼，要做网页设计真是麻烦，信息多得都看不过来，界面都乱套了。不怕，CSS里有个超级实用的“懒人模式”可以帮忙——把暂时不用展现出来的内容隐藏起来，然后加上省略号就行。像表格啊、列表啊、标题之类的都是经常用到的地方，这个方法非常管用！
要实现超出隐藏省略效果，得用到三个属性：
设个 no wrap 的 white-space 属性试试！文字瞬间都老实呆着不动了！
2、overflow：设成hidden，把溢出区域藏起来；
太长的话，别担心，我会用……（省略号）代替接下来的内容。
光靠一个属性可不行，得三管齐下才能搞定。
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
应用场景
说到写字表，有些格子里字儿多得看不清咋办？莫着急让我们学学那个叫做”超过隐藏省略”的秘诀！把那些又长又麻的词给藏起來，表格立刻清爽多！
li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
那张清单真有点眼花缭乱！别怕，我们来试着隐藏下部分内容。把这些用不着的丢在一边，看看是不是瞬间清爽多了？
标题太长了看着就乱糟糟的，挺丑的对？那咋整？别急，咱们可以学点技巧，比如用隐藏的符号或者省略号来把多余的信息巧妙地藏起来。这样一调整，标题就会变得干净利落多！
咦发现咱们导航栏好长，看着都眼花，这事咋整？别急，删掉多余的内容就行！这样一来，导航栏就能变得整洁又好用啦
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
示例代码
别小看那些代码例子，照着搬到你们电脑里就能搞定。css里面那个神奇的“隐形省略技术”真的超有用，什么时候都能用得上。试试这样弄，网页瞬间就变得更漂亮也更好使！
前端开发要认真弄！别觉得随便删点字儿就能省事了，那会拖慢传送速度，看起来也不舒服！
nav a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
评论0