常用属性考察✅

实现 table header 吸顶

答案

采用 sticky 实现吸顶效果

<style>
  .sticky-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
  }
  .sticky-table th,
  .sticky-table td {
    padding: 8px;
    background: #fff;
  }

  .sticky-table th {
    position: sticky;
    top: 0;
    background: #eee;
    z-index: 2;
  }
  .table-container {
    width: 400px;
    height: 200px;
    overflow: auto;
    border: 1px solid #aaa;
  }
</style>

<div class="table-container">
  <table class="sticky-table">
    <thead>
      <tr style="background: #f5f5f5">
        <th style="width: 100px">姓名</th>
        <th style="width: 120px">职位</th>
        <th>部门</th>
        <th>城市</th>
        <th>入职时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>前端工程师</td>
        <td>技术部</td>
        <td>北京</td>
        <td>2022-01-10</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>后端工程师</td>
        <td>技术部</td>
        <td>上海</td>
        <td>2021-08-15</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>产品经理</td>
        <td>产品部</td>
        <td>深圳</td>
        <td>2020-05-20</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>设计师</td>
        <td>设计部</td>
        <td>广州</td>
        <td>2023-03-12</td>
      </tr>
    </tbody>
  </table>
</div>

Open Sandbox

如何实现页面文本不可选中，不可复制

答案

核心概念

可以通过 CSS 和 JavaScript 结合的方式实现页面文本不可选中和不可复制。这种技术常用于保护版权内容或防止用户复制敏感信息。

css user-select

<style>
  .unselectable-text {
    background: #ffe8e8;
    padding: 15px;
    border-radius: 5px;
    margin: 10px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
</style>
<div class="unselectable-text">
  这是一段不可选中的文本，通过 CSS 的 user-select: none
  实现。你可以尝试选中这段文字，但会发现无法选中。
</div>

Open Sandbox

js copy event

<style>
  .demo-section {
    background: #ffe8e8;
    padding: 15px;
    border-radius: 5px;
    margin: 10px 0;
  }
</style>
<div class="demo-section">
  <h2>实现代码</h2>
  <pre><code>
/* JavaScript 阻止复制 */
document.addEventListener("copy", function (e) {
  e.preventDefault();
});</code></pre>
</div>

<script>
  let protectionEnabled = true;

  function preventCopy(e) {
    if (protectionEnabled) {
      e.preventDefault();
      alert("复制操作已被阻止！");
    }
  }
  document.addEventListener("copy", preventCopy);
</script>

Open Sandbox

延伸阅读

• CSS user-select 属性
• JavaScript copy 事件

三角形 border

答案

典型策略采用 border 实现

<style>
  /* 将任意三个边框设置为 transparent, 就可以显示出对应方向三角形 */
  .triangle {
    width: 0;
    height: 0;
    border-top: 30px solid orange;
    border-left: 30px solid blue;
    border-right: 30px solid yellow;
    border-bottom: 30px solid red;
  }
</style>
<div class="triangle"></div>

Open Sandbox

延伸阅读

• CSS 边框
• CSS 变换

实现末尾省略功能

答案

核心概念

通过设置元素的 text-overflow 属性为 ellipsis，并配合 white-space 和 overflow 属性，可以实现文本的末尾省略功能。多行采用 -webkit-line-clamp 实现。

单行省略

<style>
  .ellipsis {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
    padding: 8px;
  }
</style>
<div class="ellipsis">
  这是一个很长的文本内容，当内容超出容器宽度时会在末尾显示省略号。
</div>

Open Sandbox

多行省略

<style>
  .ellipsis {
    width: 200px;
    border: 1px solid #ccc;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    white-space: normal; /* 确保允许运行断行 */
    word-break: break-word; /* 或 overflow-wrap: break-word; 两者选其一 */
  }
</style>
<div class="ellipsis">
  这是一个很长的文本内容，当内容超出容器宽度时会在末尾显示省略号。支持多行显示，超出指定行数自动截断并显示省略号。
</div>

Open Sandbox