likes
comments
collection
share

8.0样式美化系列——文本、盒子的特殊样式场景

作者站长头像
站长
· 阅读数 22

一、文本相关的特殊样式场景

1.1 文本3行超出省略 (Flex布局下)

8.0样式美化系列——文本、盒子的特殊样式场景

8.0样式美化系列——文本、盒子的特殊样式场景

.box {
    width: 500px;
    height: 100px;
    border: 2px dashed gold;
    display: flex;
}
img { width: 100px; }
.des-container {
    flex: 1; /* 必须要有，否则value的长度为0，看不到任何内容 */
    display: flex;
    padding: 10px;
    line-height: 28px; /* 为了隐藏第四行内容的出现！ */
}
.key {
    width: 80px;
    font-weight: bold;
}
.value {
    /* 必须要有，超出省略不起作用，目的是从0增长到容器剩余的最大宽度，
       然后超出省略；而不是初始就是内容已经超出的自身宽度 */
    width: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<div class="box">
    <img src="./2.webp" alt="">
    <div class="des-container">
        <span class="key">基本信息：</span>
        <span class="value">文本超出省略文本超出省略文本超出省略文本超出省略文本超出省略文本超出省略文本超出省略文本超出省略文本超出省略文本超出省略文本超出省略</span>
    </div>
</div>

1.2 white-space、word-wrap、word-breack 的区别

www.freesion.com/article/390…

8.0样式美化系列——文本、盒子的特殊样式场景

  • white-space： normal | nowrap | pre | pre-wrap | pre-line， 控制空白字符的显示，同时还能控制是否自动换行；
  • word-break： normal | break-all | keep-all，控制单词如何被拆分换行；
  • word-wrap (overflow-wrap)： normal | break-word，控制长度超过一行的单词是否被拆分换行，是word-break的补充。

1. white-space 8.0样式美化系列——文本、盒子的特殊样式场景

2. word-break

属性值特点
normal默认，仅限长度超过一行的单词(仅限英文)才不换行
break-all所有单词碰到边界一律拆分换行
keep-all所有连续的单词(包括中文、日文、韩文等语言)一律不拆分换行， 也可以理解为只有空格可以触发自动换行

3. word-wrap (overflow-wrap)

属性值特点
normal默认，表示在正常的单词结束处换行
break-word防止其溢出其包裹盒， 只有当一个单词一整行都显示不下时，才会拆分换行该单词。 所以使用overflow-wrap更好理解，即长到溢出的单词才会被强制拆分换行！

1.3 uppercase、lowercase、capitalize、text-indent、 :first-letter、:first-line

8.0样式美化系列——文本、盒子的特殊样式场景

8.0样式美化系列——文本、盒子的特殊样式场景

.box { width: 400px; line-height: 24px; border: 2px dashed gold; }
.title { font-weight: bold; }
.uppcase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.indent { text-indent: 20px; }
.first-letter::first-letter { color: red; }
.first-line::first-line { color: red; }

<body>
    <div class="box">
        <div class="title">noraml 正常内容：</div>
        <div>
            <p>This is some text in a paragraph.</p>
            <p>Need to know how to make text all uppercase or in all caps with CSS? </p>
        </div>
    </div>
    <div class="box">
        <div class="title">text-transform: uppercase 全部大写：</div>
        <div class="uppcase">
            <p>This is some text in a paragraph.</p>
            <p>Need to know how to make text all uppercase or in all caps with CSS? </p>
        </div>
    </div>
    <div class="box">
        <div class="title">text-transform: lowercase 全部小写：</div>
        <div class="lowercase">
            <p>This is some text in a paragraph.</p>
            <p>Need to know how to make text all uppercase or in all caps with CSS? </p>
        </div>
    </div>
    <div class="box">
        <div class="title">text-transform: capitalize 所有单词首字母大写：</div>
        <div class="capitalize">
            <p>This is some text in a paragraph.</p>
            <p>Need to know how to make text all uppercase or in all caps with CSS? </p>
        </div>
    </div>
    <div class="box">
        <div class="title">text-indent: 20px 首行文本缩进：</div>
        <div class="indent">
            <p>This is some text in a paragraph.</p>
            <p>Need to know how to make text all uppercase or in all caps with CSS? </p>
        </div>
    </div>
    <div class="box">
        <div class="title">::first-letter 首个字母：</div>
        <div class="first-letter">
            <p>This is some text in a paragraph.</p>
            <p>Need to know how to make text all uppercase or in all caps with CSS? </p>
        </div>
    </div>
    <div class="box">
        <div class="title">::first-line 首行：</div>
        <div class="first-line">
            <p>Need to know how to make text all uppercase or in all caps with CSS? </p>
            <p>This is some text in a paragraph.</p>
        </div>
    </div>
</body>

1.4 消除毛边与串流、连字符hypens: auto + lang="en"（限Firefox火狐浏览器）

问题，段落右边层次不齐；另外text-align: justify 是将单词间平均分布间距，不易认读

8.0样式美化系列——文本、盒子的特殊样式场景

8.0样式美化系列——文本、盒子的特殊样式场景

8.0样式美化系列——文本、盒子的特殊样式场景

1.5 定制Web字体与@font-face规则

嵌入Web字体的关键是@font-face规则。通过它可以指定浏览器下载Web字体资源的服务器地址，以及如何在样式表中应用该字体。可用的类型有："woff"、"woff2"、"truetype(ttf)"、"opentype"、"embedded-opentype(eot)"和"svg"。

注意： 一个常见错误就是在@font-face块中把font-weight描述符设置为noraml，而在使用时却把font-weight设置为bold来引用它，导致字体 “模拟变粗”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         @font-face {
            font-family: "ABC";
            font-style: italic;
            src: url("./font.ttf") format('truetype');
        }
        .box {
            /* font-weight: bolder; */
            font-family: ABC;
            width: 300px;
            line-height: 24px;
            border: 2px dashed gold;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>自定义字体</div>
        <p>This is some text in a paragraph.</p>
    </div>
</body>
</html>

1.6 图片img的下3像素对齐问题

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。下3像素的原因：是图片、文本的底部基准线对齐方式的问题。

8.0样式美化系列——文本、盒子的特殊样式场景

  • 方法1：display: block
  • 方法2：vertical-align: bottom | middle | top
  • 方法3：减小line-height
  • 方法4：font-size: 0，原理是line-height为相对单位，通过font-size间接控制行高
  • 方法5：flex布局垂直居中 （最佳推荐）

8.0样式美化系列——文本、盒子的特殊样式场景

要想完全垂直居中，最先想到的方法就是让后面的“幽灵字符”也是vertical-align:middle，然而，呵呵，既然称之为“幽灵”就表示不会受非继承特性的属性影响，所以，根本没法设置vertical-align:middle，除非你自己创建一个显示的内联元素。

二、盒子相关的特殊样式场景

2.1 边框图片 border-image

需要结合图片选择合适的border-width 和 border-image-slice: 图片宽度 ➗ 3

8.0样式美化系列——文本、盒子的特殊样式场景

.box {
    width: 300px;
    height: 300px;
    border: 30px solid;
    border-image: url('./img.png') 30; /* source  slice将源图像分割成区域的尺寸*/
    border-image-outset: 0; /* 边框图像与元素外边缘的距离 */
    border-image-repeat: space; /* stretch | repeat | round | space */
}

<div class="box">内容区域</div>

2.2 margin: auto 在flex布局下吃掉所有剩余空间，实现水平垂直居中

  • margin-right: auto 吃掉所有剩余空间，把其他项目推到右侧

8.0样式美化系列——文本、盒子的特殊样式场景

.box {
    width: 500px;
    height: 100px;
    border: 2px dashed gold;
    display: flex;
}
.left {
    margin-right: auto;
    padding: 20px;
    background-color: red;
}
.right {
    padding: 20px;
    border: 1px solid green;
}

<div class="box">
    <div class="left">Left</div>
    <div class="right">Right1</div>
    <div class="right">Right2</div>
</div>
  • 水平垂直居中

8.0样式美化系列——文本、盒子的特殊样式场景

方法一：flex 布局

.box {
    width: 500px;
    height: 200px;
    border: 2px dashed gold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner {
    padding: 20px;
    background-color: red;
}

方法二：display:flex + margin: auto

.box {
    width: 500px;
    height: 200px;
    border: 2px dashed gold;
    display: flex;
}
.inner {
    padding: 20px;
    margin: auto; /* 水平垂直居中 */
    background-color: red;
}

<div class="box">
    <div class="inner">内容区域</div>
</div>

方法二：position + transform

.box {
    width: 500px;
    height: 200px;
    border: 2px dashed gold;
    position: relative;
}
.inner {
    padding: 20px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}