8.0样式美化系列——文本、盒子的特殊样式场景
一、文本相关的特殊样式场景
1.1 文本3行超出省略 (Flex
布局下)
.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
的区别
- 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
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
.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
是将单词间平均分布间距,不易认读
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像素的原因:是图片、文本的底部基准线对齐方式的问题。
- 方法1:
display: block
- 方法2:
vertical-align: bottom | middle | top
- 方法3:减小
line-height
- 方法4:
font-size: 0
,原理是line-height
为相对单位,通过font-size
间接控制行高 - 方法5:
flex
布局垂直居中 (最佳推荐)
要想完全垂直居中,最先想到的方法就是让后面的“幽灵字符”也是vertical-align:middle
,然而,呵呵,既然称之为“幽灵”就表示不会受非继承特性的属性影响,所以,根本没法设置vertical-align:middle
,除非你自己创建一个显示的内联元素。
二、盒子相关的特殊样式场景
2.1 边框图片 border-image
需要结合图片选择合适的
border-width
和border-image-slice: 图片宽度 ➗ 3
.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
吃掉所有剩余空间,把其他项目推到右侧
.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>
- 水平垂直居中
方法一: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%);
}
转载自:https://juejin.cn/post/7086852390489423902