CSS小技巧、小知识

最新推荐文章于 2023-08-15 00:42:53 发布

溯琳

最新推荐文章于 2023-08-15 00:42:53 发布

阅读量114

点赞数 2

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/m0_56787796/article/details/115681660

版权

CSS 鼠标样式垂直居中文本溢出图片处理

关键词由优快云通过智能技术生成

笔记专栏收录该内容

5 篇文章

订阅专栏

CSS小技巧、小知识

鼠标样式
图片文字垂直居中对齐
文本域防拖拽
解决图片底部有空白缝隙
单行文本溢出显示省略号
多行文本溢出显示省略号

鼠标样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>鼠标样式</title>
  </head>
  <body>
    <ul>
      <li style="cursor: default">默认鼠标样式</li>
      <li style="cursor: pointer">小手样式</li>
      <li style="cursor: move">移动样式</li>
      <li style="cursor: text">文本样式</li>
      <li style="cursor: not-allowed">禁止样式</li>
    </ul>
  </body>
</html>

图片文字垂直居中对齐

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图片文字垂直居中对齐</title>
    <style>
      img {
        width: 200px;
        height: 200px;
        /* 让图片和文字垂直居中,默认基线对齐 */
        vertical-align: middle;
        /* vertical-align: top; */
        /* vertical-align: bottom; */
      }
      textarea {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <img src="111.jpg" alt="" /> sulin哥哥
    <br />
    留言<textarea name="" id="" cols="40" rows="15"></textarea>
  </body>
</html>

文本域防拖拽

上面的代码加上这个 resize: none;

textarea {
        /* 文本域防拖拽 */
        resize: none;
        vertical-align: middle;
      }

解决图片底部有空白缝隙

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>解决图片底部有空白缝隙</title>
    <style>
      div {
        border: 2px solid red;
      }
      img {
        width: 200px;
        height: 200px;
        vertical-align: middle;
        /* display: block;*/
      }
    </style>
  </head>
  <body>
    <div>
      <img src="111.jpg" alt="" />
    </div>
  </body>
</html>

没加vertical-align: middle;或display: block;

加上vertical-align: middle;或display: block;

单行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>单行文本溢出显示省略号</title>
    <style>
      div {
        width: 150px;
        height: 80px;
        background-color: blue;
        margin: 150px auto;
        /* 如果文字显示不开自动换行 */
        /* white-space: normal; */
        /* 如果文字显示不开也必须强制一行内显示 */
        white-space: nowrap;
        /* 溢出的部分隐藏起来 */
        overflow: hidden;
        /* 文字溢出的时候用省略号来显示 */
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div>啥也不说，此处省略一万字</div>
  </body>
</html>

多行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>多行文本溢出显示省略号</title>
    <style>
      div {
        width: 150px;
        height: 65px;
        background-color: blue;
        margin: 100px auto;
         /* 溢出的部分隐藏起来 */
        overflow: hidden;
        /* 文字溢出的时候用省略号来显示 */
        text-overflow: ellipsis;
        /* 弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 限制在一个块元素显示的文本的行数 */
        -webkit-line-clamp: 3;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
      }
    </style>
  </head>

  <body>
    <div>啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字</div>
  </body>
</html>