css用户界面、溢出文字省略

最新推荐文章于 2022-01-23 13:41:01 发布

qq_50636169

最新推荐文章于 2022-01-23 13:41:01 发布

阅读量51

点赞数 1

本文链接：https://blog.csdn.net/qq_50636169/article/details/119188964

版权

css用户界面

1.更改鼠标样式cursor

li { cursor:pointer;}

default:小白（默认）
point: 小手的样子
mov：移动
text:文本样式
not-allowed:禁止

2.轮廓线outline
消除表单轮廓线

input {outline: none/0;}

3.防止拖拽文本域resize

text { resize: none;}

溢出文字省略

1.单行文本溢出显示省略号
满足一下三个条件：
（1）强制一行内显示文本
white-space: nowrap/normal;

nowarp:不换行 normal:默认自动换行

（2）超出部分隐藏：
overflow: hidden;

(3) 用省略号替代文字超出的部分：
text-overflow: ellipsis;

<style>
        .danhang {
            width: 300px;
            height: 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>
<body>
    <div class="danhang">
        中国天气网讯今天(3日)，华北、 黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35°C,预报显示，今后三天(3-5日)
    </div>

2.多行文本溢出显示省略

overflow： hidden；
text-overflow： ellipsis；
display： -webkit-box;
-webkit-box-orlent: vertical;

<style>
      .duohang {
            width: 200px;
            height: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;  
            -webkit-box-orient: vertical;
        }
</style>
<body>
    <div class="duohang">
        中国天气网讯今天(3日)，华北、 黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35°C,预报显示，今后三天(3-5日)
    </div>
</body>

qq_50636169

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css用户界面、溢出文字省略

css用户界面1.更改鼠标样式cursorli { cursor:pointer;}default:小白（默认）point: 小手的样子mov：移动text:文本样式not-allowed:禁止2.轮廓线outline消除表单轮廓线input {outline: none/0;}3.防止拖拽文本域resizetext { resize: none;}溢出文字省略...
复制链接

扫一扫