css两行打点展开

CSS两行打点展开是网页设计中常用的一种技术，主要是为了使页面简洁，同时展示更多的内容。下面我们来具体了解一下使用CSS打点展开的方法。

首先，使用CSS的text-overflow属性来定义文本溢出时如何处理。text-overflow属性有三个可选值：ellipsis（省略号）、clip（剪切）和string（字符串）。在这里，我们将使用ellipsis值来打点展开文本：

.text{
    width:100%;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis; 
} 

上面的代码定义了一个class为text的样式，其中width为100%表示宽度占满整个容器，overflow:hidden表示溢出内容隐藏，而white-space:nowrap表示禁止换行，使文本一行显示。最后text-overflow:ellipsis表示文本溢出时使用省略号打点展开。

那么如何实现两行打点展开呢？下面的代码可以实现两行显示后才打点展开：

.text{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
} 

这里，我们去掉了white-space:nowrap并添加了两个新的属性：-webkit-box和-webkit-line-clamp。其中，-webkit-box可以把一个元素变成一个弹性伸缩容器，在该容器上使用弹性布局盒子模型，使其内部的子元素可以按照一定的规则进行排列，从而实现强大的布局效果；-webkit-line-clamp表示在多行文本溢出时，限制只显示一定数量的行数。

以上就是使用CSS两行打点展开的方法，你可以根据实际情况进行调整与修改，在网页设计中使用该技术，让你的页面更加简洁明了，同时展示更多的内容。