<think>我们要求实现一个div内文本水平垂直
居中，并
且支持多行文本，当超过
两行时
显示省略号（...）。这实际上需要组合使用多种CSS技术。
分析需求：
1. 水平垂直
居中：可以使用flex布局（推荐）或绝对定位+transform等方法。
2. 支持多行文本：因此
不能使用line-height（只能单行）。
3.
超出两行显示省略号：使用CSS的`-webkit-line-clamp`属性（注意兼容性）来实现多行文本的截断。
注意：`-webkit-line-clamp`是一个非标准属性，但在现代浏览器中支持良好。如果需要兼容旧版浏览器（如IE），则需要其他方法，但这里没有特别要求兼容性。
步骤：
1. 创建一个固定高度和
宽度的容器（div），为了演示，我们给一个固定尺寸。
2. 使用flex布局实现内部文本的水平垂直
居中。
3. 设置文本容器的样式，使其能够支持多行省略（
两行后
显示省略号）。
实现多行省略的关键CSS属性：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制
两行 */
overflow: hidden;
但是，注意：flex容器内的子元素如果直接使用这些属性，可能会与flex的
居中效果冲突。因此，我们需要在flex容器内部再嵌套一个元素（例如div）来包裹文本，并应用多行省略样式。
结构示例：
<div class="container">
<div class="text">这里是文本内容，可以多行，超过
两行会
显示省略号</div>
</div>
样式：
.container {
display: flex;
justify-content: center; /* 水平
居中 */
align-items: center; /* 垂直
居中 */
width: 200px; /* 示例
宽度 */
height: 100px; /* 示例高度 */
border: 1px solid #ccc; /* 为了可视化 */
}
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-align: center; /* 文本水平
居中（在容器内） */
}
注意：由于我们使用了flex布局，文本容器（.text）本身也会在父容器（.container）中
居中。但是，文本在.text容器内部还需要水平
居中，所以我们给.text设置了`text-align: center`。
但是，这里有一个问题：.text的
宽度可能会自动扩展为父容器（.container）的
宽度，所以文本水平
居中会正常。但是，如果文本
不够长，我们希望它
居中显示；如果文本很长，则换行并
居中，最后
超出两行显示省略号。
然而，-webkit-box布局模型默认是块级元素，它会占
满父容器的
宽度（在flex容器内，如果.text没有设置
宽度，它默认会收缩以适应内容，但这样文本就
不会换行了）。所以我们需要设置.text的
宽度为100%，这样文本才能根据父容器的
宽度进行换行。
因此，调整.text的
宽度为100%：
.text {
width: 100%; /* 重要：保证文本换行基于容器
宽度 */
... 其他样式
}
完整代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-align: center;
width: 100%; /* 保证文本换行 */
}
</style>
</head>
<body>
<div class="container">
<div class="text">这里是文本内容，可以多行，超过
两行会
显示省略号这里是文本内容，可以多行，超过
两行会
显示省略号</div>
</div>
</body>
</html>
```
注意：这种方法在大多数现代浏览器中有效（Chrome, Safari, Firefox, Edge等）。但是请注意，`-webkit-box`属性在Firefox中需要添加`-moz`前缀的版本吗？实际上，Firefox现在也支持`-webkit-box`（为了兼容性），但为了更广泛的兼容，我们可以同时写：
display: -webkit-box;
display: -moz-box; /* 对于旧版Firefox */
display: -ms-flexbox; /* 或者使用flex，但这里我们用的是box模型，所以
不用这个 */
但是，根据caniuse，现代浏览器已经普遍支持
不带前缀的`-webkit-line-clamp`，但为了更好的兼容性，可以只使用`-webkit-`前缀，因为Firefox也支持了`-webkit-line-clamp`（从版本68开始）。
另外，如果
不需要兼容旧版浏览器，可以只写`display: -webkit-box;`。
另外，我们也可以考虑使用其他方法来实现多行省略，比如使用伪元素，但`-webkit-line-clamp`是最简洁的。
最后，关于水平垂直
居中，我们使用了flex，所以很简便。
因此，上述代码可以
满足需求：水平垂直
居中，支持多行（
两行）省略。
但是，注意：如果文本只有
一行，由于设置了`text-align:center`，它会水平
居中；如果文本
两行，每行都会
居中（因为容器
宽度100%，每行都是
居中显示）。当超过
两行时，第三行会被截断并
显示省略号。
如果容器高度
不够，可能会导致截断效果
不美观，所以容器高度应该足够
显示两行文本（根据行高计算）。这里我们设置了容器高度为100px，通常
两行文本是足够的。但实际应用中，行高可能
不是默认值，所以最好设置一个行高（line-height）来确保
两行文本的高度加上内边距
不超过容器高度。
例如，我们设置行高为1.5，那么
两行文本的高度就是2*1.5*font-size。假设字体大小为14px，则
两行文本高度为42px（2*1.5*14=42）。所以容器高度至少42px，我们设置100px是足够的。
因此，我们可以给.text设置一个行高，并调整容器高度到合适值。
改进后的样式：
```css
.container {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 80px; /* 适当调整高度，确保能
显示两行 */
border: 1px solid #ccc;
}
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-align: center;
width: 100%;
line-height: 1.5; /* 设置行高 */
font-size: 14px; /* 设置字体大小 */
}
```
这样，
显示效果会更可控。
总结：以上方法实现了div内文本的水平垂直
居中，支持多行（最多
两行），
超出两行显示省略号。
注意：由于
省略号是通过`-webkit-line-clamp`实现的，所以兼容性需要考虑（IE
不支持，但现代浏览器基本都支持）。
如果需要兼容IE，则可能需要使用其他方法（比如用
js计算行数，或者使用绝对定位和伪元素），但这会复杂很多，
且用户没有要求兼容性，所以这里
不展开。
因此，我们给出上述方案。
</think>
# 多行文本
居中且超出两行显示省略号的实现方案
要实现div内文本水平垂直
居中、支持换行
且超出两行后
显示省略号，需要结合多种CSS技术。下面是完整实现方案：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文本
居中与
省略号效果</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.container {
max-width: 900px;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.header {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #2c3e50;
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.subtitle {
color: #7f8c8d;
font-size: 1.2rem;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
padding: 30px;
width: 380px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.card-title {
color: #3498db;
margin-bottom: 20px;
font-size: 1.5rem;
display: flex;
align-items: center;
}
.card-title i {
margin-right: 10px;
font-size: 1.8rem;
}
/* 核心实现代码 */
.text-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 150px;
background-color: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
border: 1px solid #e9ecef;
}
.text-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-align: center;
line-height: 1.5;
width: 100%;
height: 100%;
max-height: 3em; /* 2行 * 1.5行高 */
position: relative;
padding: 0 10px;
}
/*
不同方案实现 */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.grid-center {
display: grid;
place-items: center;
}
.transform-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 30px);
}
.examples {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.example-item {
background: #e3f2fd;
padding: 12px;
border-radius: 6px;
font-size: 0.9rem;
}
.code-block {
background: #2c3e50;
color: #ecf0f1;
padding: 20px;
border-radius: 8px;
font-family: 'Courier New', monospace;
margin-top: 15px;
overflow-x: auto;
font-size: 0.9rem;
position: relative;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
color: #3498db;
}
.copy-btn {
background: #3498db;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
transition: background 0.3s;
}
.copy-btn:hover {
background: #2980b9;
}
.notes {
background: #fff8e1;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
border-left: 4px solid #ffc107;
}
.notes h3 {
color: #e65100;
margin-bottom: 10px;
}
.notes ul {
padding-left: 20px;
}
.notes li {
margin-bottom: 8px;
line-height: 1.5;
}
footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.card {
width: 100%;
max-width: 500px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>多行文本
居中与
省略号效果</h1>
<p class="subtitle">实现div内文本水平垂直
居中，支持换行
且超出两行后
显示省略号</p>
</div>
<div class="card">
<h2 class="card-title"><i>📐</i> Flexbox 方案（推荐）</h2>
<div class="text-container flex-center">
<div class="text-content">
这是一个使用Flexbox布局实现的示例，文本在容器中水平垂直
居中，当文本超过
两行时
显示省略号效果。
</div>
</div>
<div class="code-block">
<div class="code-header">
<span>HTML & CSS 代码</span>
<button class="copy-btn" onclick="copyCode('code1')">复制代码</button>
</div>
<pre id="code1">/* 容器样式 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 150px; /* 固定高度 */
width: 100%;
}
/* 文本样式 */
.text-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制
显示行数 */
overflow: hidden;
text-align: center;
line-height: 1.5;
width: 100%;
}</pre>
</div>
<div class="examples">
<div class="example-item">短文本示例：单行
居中显示</div>
<div class="example-item">中等长度文本示例：
两行居中显示，无
省略号</div>
<div class="example-item">长文本示例：当文本内容超过
两行时，第三行会被截断并
显示省略号，保持前
两行居中</div>
</div>
</div>
<div class="card">
<h2 class="card-title"><i>🔲</i> Grid 方案</h2>
<div class="text-container grid-center">
<div class="text-content">
这是使用CSS Grid布局的解决方案，同样实现了文本的水平垂直
居中和
超出两行显示省略号的效果。
</div>
</div>
<div class="code-block">
<div class="code-header">
<span>HTML & CSS 代码</span>
<button class="copy-btn" onclick="copyCode('code2')">复制代码</button>
</div>
<pre id="code2">/* 容器样式 */
.container {
display: grid;
place-items: center; /* 水平垂直
居中 */
height: 150px;
width: 100%;
}
/* 文本样式 */
.text-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-align: center;
line-height: 1.5;
width: 100%;
}</pre>
</div>
<div class="notes">
<h3>实现要点说明</h3>
<ul>
<li>使用<code>-webkit-line-clamp</code>限制文本
显示行数（兼容现代浏览器）</li>
<li>设置<code>overflow: hidden</code>隐藏
超出内容</li>
<li>通过<code>line-height</code>控制行高，确保垂直
居中效果</li>
<li><code>text-align: center</code>实现水平
居中</li>
<li>Flexbox/Grid布局确保整体
居中效果</li>
</ul>
</div>
</div>
</div>
<footer>
<p>多行文本
居中与
省略号效果实现方案 | 兼容Chrome、Firefox、Edge等现代浏览器</p>
</footer>
<script>
function copyCode(elementId) {
const codeElement = document.getElementById(elementId);
const textArea = document.createElement('textarea');
textArea.value = codeElement.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
//
显示复制成功提示
const btn = event.target;
btn.textContent = '已复制!';
setTimeout(() => {
btn.textContent = '复制代码';
}, 2000);
}
</script>
</body>
</html>
```
## 实现原理说明
### 核心CSS代码
```css
.text-container {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: 100%;
}
.text-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-align: center;
line-height: 1.5;
width: 100%;
}
```
### 关键点解析
1. **水平垂直
居中**：
- 使用Flexbox的`justify-content: center`和`align-items: center`
- 或Grid的`place-items: center`
- 或绝对定位配合`transform: translate(-50%, -50%)`
2. **多行文本省略**：
- `display: -webkit-box` 启用弹性盒子布局
- `-webkit-box-orient: vertical` 设置垂直方向布局
- `-webkit-line-clamp: 2` 限制
显示行数
- `overflow: hidden` 隐藏
超出内容
3. **文本
居中**：
- `text-align: center` 实现文本水平
居中
- 合理设置`line-height`确保垂直
居中效果
### 注意事项
1. `-webkit-line-clamp`是WebKit内核浏览器的特性，但现代浏览器（包括Firefox）已广泛支持
2. 容器需要固定高度，文本区域需设置
宽度为100%
3. 行高(line-height)应根据容器高度合理设置
4. 当文本
不足
两行时，仍保持
居中显示
此方案在Chrome、Firefox、Edge等现代浏览器中均可正常工作，实现了文本的水平垂直
居中、多行
显示及
超出两行显示省略号的效果。
本文介绍了一段使用jQuery实现的列表名称长度控制脚本，当列表名称长度超过5个字符时，通过添加特定样式类来实现文本溢出省略显示效果。此方法适用于需要对长文本进行优雅截断展示的场景。
扫一扫
3695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
