要实现文本省略和“详情”按钮的完美布局，可以使用CSS来控制文本的省略效果，并结合JavaScript来处理“详情”按钮的交互。以下是一个优雅的实现方案：
首先，创建一个包含文本和“详情”按钮的HTML结构。
<div class="text-container">
<p class="text-content">这是一个很长的文本内容，当文本过长时，我们希望它能够被省略，并在后面显示一个“详情”按钮。</p>
<button class="detail-button">详情</button>
</div>
使用CSS来控制文本的省略效果，并确保“详情”按钮与省略文本在同一行显示。
.text-container {
display: flex;
align-items: center;
width: 300px; /* 根据需要调整宽度 */
border: 1px solid #ccc;
padding: 10px;
}
.text-content {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
flex-grow: 1; /* 让文本占据剩余空间 */
margin: 0; /* 去除默认的段落边距 */
}
.detail-button {
flex-shrink: 0; /* 防止按钮被压缩 */
margin-left: 10px; /* 按钮与文本之间的间距 */
}
使用JavaScript来处理“详情”按钮的点击事件，展开或收起文本。
document.querySelector('.detail-button').addEventListener('click', function() {
const textContent = document.querySelector('.text-content');
if (textContent.style.whiteSpace === 'nowrap') {
textContent.style.whiteSpace = 'normal'; // 展开文本
this.textContent = '收起';
} else {
textContent.style.whiteSpace = 'nowrap'; // 收起文本
this.textContent = '详情';
}
});
将上述代码整合在一起，完整的实现如下：
<!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>
.text-container {
display: flex;
align-items: center;
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.text-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
margin: 0;
}
.detail-button {
flex-shrink: 0;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="text-container">
<p class="text-content">这是一个很长的文本内容，当文本过长时，我们希望它能够被省略，并在后面显示一个“详情”按钮。</p>
<button class="detail-button">详情</button>
</div>
<script>
document.querySelector('.detail-button').addEventListener('click', function() {
const textContent = document.querySelector('.text-content');
if (textContent.style.whiteSpace === 'nowrap') {
textContent.style.whiteSpace = 'normal';
this.textContent = '收起';
} else {
textContent.style.whiteSpace = 'nowrap';
this.textContent = '详情';
}
});
</script>
</body>
</html>
white-space: nowrap、overflow: hidden和text-overflow: ellipsis实现文本省略效果。flex-grow: 1让文本占据剩余空间，flex-shrink: 0防止按钮被压缩。whiteSpace属性来展开或收起文本，并动态更改按钮的文本内容。这个方案简单且易于维护，适用于大多数需要文本省略和“详情”按钮的场景。