css文字两行排到 |css控制伸缩

今天来分享一种常用的网页排版技巧：CSS文字两行排到。首先，大家需要通过HTML的p标签来实现这一效果。例如：

<p class="two-lines">这是一个比较长的段落，但偶想让它显示为两行，然后以省略号结尾。</p>

接着，大家需要给这个p标签添加CSS样式。具体实现方法如下：

.two-lines {
overflow: hidden;   // 隐藏超出部分
text-overflow: ellipsis;   // 省略号结尾
display: -webkit-box;   // 将单行文字布局处理成多行，以便限制其高度
-webkit-box-orient: vertical;  // 垂直排列
-webkit-line-clamp: 2;   // 显示两行
}

这段代码使用了WebKit的CSS扩展属性。其中，display为-webkit-box的意思是将单行文字布局处理成多行，以便限制其高度；-webkit-line-clamp为2则表示最多只显示两行文字。此外，大家还可以根据需要进一步调整这个段落的外观、边距、字体等样式。例如：

.two-lines {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, sans-serif;
color: #333;
}

在实际应用中，这种CSS文字两行排到的技巧常常用于新闻标题、项目简介、商品描述等情境。大家可以在需要的HTML标签上添加相应的CSS样式，使页面的内容更加美观、清晰易读。