CSS笔记(黑马程序员pink老师前端)鼠标样式,表单轮廓,溢出文字省略号显示

鼠标样式cursor

属性值 说明
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

表单轮廓

去除表单轮廓线

input {outline:none;}

防止拖拽文本域

textarea {resize:none;}

溢出文字省略号显示

单行文本
强制单行显示文本,超出部分隐藏,文字用省略号代替超出的部分。
多行文本
有兼容性问题,适用webkit浏览器或移动端。推荐后端做这个功能。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .div1 {
            width: 100px;
            height: 40px;
            background-color: pink;
            /* 显示不开,不自动换行 */
            white-space: nowrap;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 文字溢出时,用省略号显示 */
            text-overflow: ellipsis;
        }

        .div2 {
            margin-top: 10px;
            width: 100px;
            height: 40px;
            background-color: pink;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 文字溢出时,用省略号显示 */
            text-overflow: ellipsis;
            /* 弹性伸缩盒子显示 */
            display: -webkit-box;
            /* 限制在一个块元素中显示的文本行数 */
            -webkit-line-clamp: 2;
            /* 设置伸缩盒对象的子元素排列方式 */
            -webkit-box-orient: vertical;


        }
    style>
head>

<body>
    <div class="div1">HTML 是属于 Web 的语言,每个开发人员都应对它具备基本的了解。

        你可以使用 HTML 的“标记标签”来定义网页的内容和结构。
    div>
    <div class="div2">HTML 是属于 Web 的语言,每个开发人员都应对它具备基本的了解。

        你可以使用 HTML 的“标记标签”来定义网页的内容和结构。
    div>


body>

html>

CSS笔记(黑马程序员pink老师前端)鼠标样式,表单轮廓,溢出文字省略号显示_第1张图片

你可能感兴趣的:(html+css+js,前端,css,笔记)