第一版代码

html 复制代码
<!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>
相关推荐
ObjectX前端实验室2 小时前
【图形编辑器架构】渲染层篇 — 从 React 到 Canvas 的声明式渲染实现
前端·计算机图形学·图形学
java水泥工2 小时前
基于Echarts+HTML5可视化数据大屏展示-智慧消防大屏
前端·echarts·html5
杨超越luckly2 小时前
HTML应用指南:利用POST请求获取全国索尼体验型零售店位置信息
前端·arcgis·html·数据可视化·门店数据
ObjectX前端实验室2 小时前
【图形编辑器架构】节点树篇 — 从零构建你的编辑器数据中枢
前端·计算机图形学·图形学
ikun778g3 小时前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
IT_陈寒3 小时前
React Hooks 实战:这5个自定义Hook让我开发效率提升了40%
前端·人工智能·后端
三月的一天3 小时前
React单位转换系统:设计灵活的单位系统与单位系统转换方案
前端·javascript·react.js
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
xiaoyan20154 小时前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron