第一版代码

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>
相关推荐
渣哥12 分钟前
代理选错,性能和功能全翻车!Spring AOP 的默认技术别再搞混
javascript·后端·面试
遇见火星16 分钟前
Docker入门:快速部署你的第一个Web应用
前端·docker·容器
WeilinerL33 分钟前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊37 分钟前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
-睡到自然醒~42 分钟前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试
洛卡卡了1 小时前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫1 小时前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman1 小时前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥1 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥1 小时前
Vue2 封装二维码弹窗组件
javascript·vue.js