css超出两行显示省略号

解决方案

在网页设计中，当文本内容超出指定区域时，为了保持页面美观和简洁，我们常常需要对超出部分进行省略处理。对于CSS实现文本超出两行显示省略号的问题，主要通过设置display: -webkit-box;、-webkit-line-clamp等属性来达成。

基本实现方法

最直接的实现方式如下：
css
.ellipsis {
display: -webkit-box; /* 弹性伸缩盒子模型 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 2; /* 设置行数为2 */
overflow: hidden; /* 隐藏超出的内容 */
text-overflow: ellipsis; /* 文本溢出显示省略号 */
}

HTML代码示例如下：
```html

</p>

<h2>兼容性问题与解决</h2>

<p>上述方法基于WebKit内核浏览器，因此在非WebKit内核（如Firefox）的浏览器中可能无法正常工作。为了解决这一问题，可以采用以下方法：</p>

<ol>
<li><strong>使用JavaScript补充</strong>：对于不支持<code>-webkit-line-clamp的浏览器，可以通过JavaScript计算文本的高度并手动截取文本。
```javascript
function truncateText(element, lineClamp) {
const lineHeight = parseFloat(window.getComputedStyle(element).lineHeight);
const maxHeight = lineHeight * lineClamp;
if (element.scrollHeight > maxHeight) {
    let text = element.textContent;
    while (element.scrollHeight > maxHeight && text.length > 0) {
        text = text.slice(0, -1);
        element.textContent = text + '...';
    }
}
}


const elements = document.querySelectorAll('.ellipsis');
elements.forEach(el => truncateText(el, 2));

2. 纯CSS近似方案：如果严格要求纯CSS解决方案，可以使用伪元素配合固定高度实现近似效果，但这种方法不能精确控制字符数量。
   css
.ellipsis-alt {
height: 40px; /* 假设每行高度为20px */
position: relative;
overflow: hidden;
}
.ellipsis-alt::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: white; /* 背景色需与容器背景一致 */
padding-left: 5px;
}


以上方法各有优劣，开发者可以根据具体需求选择最适合的方案。