前端常用样式(后续持续维护)_前段必填样式-优快云博客

1 超出省略号

超出三行出现省略号
.ellipsis-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden; // 隐藏超出部分
  text-overflow: ellipsis;// 文本溢出时显示省略号
}

CSS超出不换行加省略号
.container {
  width: 200px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号代表被隐藏的文本 */
}

2 自定义滚动条

/* 设置滚动条的宽度 /
::-webkit-scrollbar{
width: 10px;
}
/ 将轨道改为蓝色并设置圆角边框 /
::-webkit-scrollbar-track{
background-color: blue;
border-radius: 10px;
}
/ 将滑块（显示滚动量）改为灰色并设置圆角 /
::-webkit-scrollbar-thumb{
background: gray;
border-radius: 10px;
}
/ 悬停时显示为深灰色 */
::-webkit-scrollbar-thumb:hover{
  background: darkgray;
}

3 平滑滚动

滚动行为可以实现平滑滚动，使页面在不同部分之间的过渡更加平滑。

html{
  scroll-behavior:smooth;
}

4 鼠标左右案件禁用操作

contextmenu事件是用户右键点击页面上元素触发的事件，通常用于在特定元素上添加自定义的右键菜单，可以通过阻止默认事件来禁止浏览器自带的右键菜单。

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

也可以在特定元素上添加自定义的右键菜单

const menu = document.querySelector('.custom-menu');

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();

  menu.style.display = 'block';
  menu.style.left = e.pageX + 'px';
  menu.style.top = e.pageY + 'px';
});

document.addEventListener('click', function(e) {
  menu.style.display = 'none';
});

5 通过CSS样式控制用户是否可以选择文本

-webkit-user-select: none;是 WebKit 内核浏览器（如 Chrome 和 Safari）特有的属性，用于禁止用户选择页面上的文本。该属性可以应用于任何 HTML 元素。

user-select: none 是标准的 CSS 属性，适用于大多数现代浏览器，可以通过它来禁止用户选择文本。同样，该属性可以应用于任何 HTML 元素。

在以下示例代码中，.disable-select 类被应用于 HTML 元素，则该元素及其子元素都将无法被选中或拷贝。

.disable-select {
  -webkit-user-select: none; /* 对于 WebKit 浏览器 */
  -moz-user-select: none; /* 对于 Firefox */
  -ms-user-select: none; /* 对于 IE/Edge */
  user-select: none; /* 标准写法 */
}

6 复制文本的事件

copy 事件：当用户执行复制操作时，浏览器会触发 copy 事件。可以通过 JavaScript 来监听该事件，并在事件触发时执行相应的操作。

document.addEventListener('copy', function(e) {
  // 在这里可以自定义复制的内容
  e.clipboardData.setData('text/plain', '这里是要复制的文本内容');
  e.preventDefault(); // 取消默认的复制操作
});