CSS实现单行多行文本溢出显示省略号

1.单行文本溢出显示省略号

HTML:

<div>
      Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码	编辑器,编辑器中内置了扩展程序管理的功能。
 </div>

CSS:

div{
        height: 200px;
        width: 200px;
        background: pink;
        white-space: nowrap;/*nowrap 文本不会换行，会在此行继续显示*/
        overflow: hidden;/*溢出隐藏*/
        text-overflow: ellipsis;/*文本溢出隐藏，显示省略号*/
       }

图示:

2.多行文本溢出显示省略号

CSS:

div{
        height: 40px;
        width: 200px;
        background: pink;
    	/*将对象作为伸缩盒子模型展示*/
        display: -webkit-box;
    	/*设置或检索伸缩盒对象的子元素的排列方式*/
	-webkit-box-orient: vertical;
    	/*显示的行数*/
	-webkit-line-clamp: 2;
    	/*隐藏超出的内容*/
	overflow: hidden;
    	/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
    	text-overflow: ellipsis;
       }

效果图：

标签：省略号,单行,CSS,webkit,overflow,文本,溢出
来源： https://www.cnblogs.com/Eamon-18/p/15969662.html