当前位置：首页 > news >正文

第一版代码

news 2025/9/29 11:21:44

<!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样式 --><linkrel="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 left6px / calc(33.33% - 6px) 1px no-repeat,linear-gradient(to bottom, white, transparent) top 6px left 0 / 1pxcalc(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 / 1pxcalc(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 / 1pxcalc(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 / 1pxcalc(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 Plusapp.use(ElementPlus);app.mount("#app");</script></body>
</html>