<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>最终修复滚动条 Demo</title>
<!-- 引入Element Plus样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-plus/dist/index.css"
/>
<style>
html {
font-size: 16px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
background-color: #f0f2f5;
}
.display-box {
display: inline-flex;
flex-direction: column;
position: relative;
min-width: 200px;
max-width: 560px;
min-height: 200px;
max-height: 300px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.display-box::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: red;
-webkit-mask: linear-gradient(to right, white, transparent) top 0 left
6px / calc(33.33% - 6px) 1px no-repeat,
linear-gradient(to bottom, white, transparent) top 6px left 0 / 1px
calc(33.33% - 6px) no-repeat,
linear-gradient(to left, white, transparent) bottom 0 right 6px /
calc(33.33% - 6px) 1px no-repeat,
linear-gradient(to top, white, transparent) bottom 6px right 0 / 1px
calc(33.33% - 6px) no-repeat,
radial-gradient(
circle at bottom right,
transparent 7px,
white 7px,
white 8px,
transparent 8px
)
top left / 8px 8px no-repeat,
radial-gradient(
circle at top left,
transparent 7px,
white 7px,
white 8px,
transparent 8px
)
bottom right / 8px 8px no-repeat;
mask: linear-gradient(to right, white, transparent) top 0 left 6px /
calc(33.33% - 6px) 1px no-repeat,
linear-gradient(to bottom, white, transparent) top 6px left 0 / 1px
calc(33.33% - 6px) no-repeat,
linear-gradient(to left, white, transparent) bottom 0 right 6px /
calc(33.33% - 6px) 1px no-repeat,
linear-gradient(to top, white, transparent) bottom 6px right 0 / 1px
calc(33.33% - 6px) no-repeat,
radial-gradient(
circle at bottom right,
transparent 7px,
white 7px,
white 8px,
transparent 8px
)
top left / 8px 8px no-repeat,
radial-gradient(
circle at top left,
transparent 7px,
white 7px,
white 8px,
transparent 8px
)
bottom right / 8px 8px no-repeat;
}
.display-box-content {
padding: 1.25rem;
padding-right: 2.5rem;
box-sizing: border-box;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
/* 标题容器样式 */
.title {
font-size: 0.875rem;
color: #303133;
line-height: 1.5;
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.title .label {
font-weight: bold;
color: red;
font-size: 1rem;
margin-right: 0.5em;
flex-shrink: 0; /* 防止标签被压缩 */
}
/* 标题文本样式 - 实现省略号效果 */
.title-text {
flex: 1; /* 占据剩余空间 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏溢出 */
text-overflow: ellipsis; /* 显示省略号 */
min-width: 0; /* 确保flex项目可以收缩 */
}
.details {
margin-top: 0.5rem;
}
.suggestion {
margin-top: 1rem;
}
.details h3,
.suggestion h3 {
font-size: 1rem;
color: #303133;
margin-top: 0;
margin-bottom: 0.25rem;
font-weight: 600;
}
.details-content,
.suggestion-content {
font-size: 0.875rem;
color: #606266;
line-height: 1.7;
}
.details-content {
min-height: 50px;
}
</style>
</head>
<body>
<div id="app">
<div class="display-box">
<div class="display-box-content">
<!-- 使用Element Plus的Tooltip组件包裹标题 -->
<el-tooltip
:content="titleText"
placement="top"
:disabled="!isTitleOverflow"
effect="light"
>
<div class="title" ref="titleRef">
<span class="label">标题:</span>
<span class="title-text"
>{{ titleText
}}此版本已修复滚动条问题。当内容足够多时，滚动条现在会正确出现。此版本已修复滚动条问题。当内容足够多时，滚动条现在会正确出现。此版本已修复滚动条问题。当内容足够多时，滚动条现在会正确出现。</span
>
</div>
</el-tooltip>
<div class="details">
<h3>详情</h3>
<div class="details-content"></div>
</div>
<div class="suggestion">
<h3>建议</h3>
<div class="suggestion-content">
<p>使用Flexbox布局是解决此类高度和溢出问题的现代标准方法。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 引入Vue和Element Plus -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script>
const { createApp, ref, onMounted, onBeforeUnmount } = Vue;
const app = createApp({
setup() {
const titleText = ref("关于系统功能更新的详细说明");
const isTitleOverflow = ref(false);
const titleRef = ref(null);
// 检查标题是否溢出
const checkTitleOverflow = () => {
if (titleRef.value) {
const titleElement = titleRef.value.querySelector(".title-text");
if (titleElement) {
// 比较元素的滚动宽度和可视宽度
isTitleOverflow.value =
titleElement.scrollWidth > titleElement.clientWidth;
}
}
};
// 组件挂载后检查溢出状态
onMounted(() => {
checkTitleOverflow();
// 添加窗口大小变化监听
window.addEventListener("resize", checkTitleOverflow);
});
// 组件卸载前移除监听
onBeforeUnmount(() => {
window.removeEventListener("resize", checkTitleOverflow);
});
return {
titleText,
isTitleOverflow,
titleRef,
};
},
});
// 使用Element Plus
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>