CSS - 文本属性

最新推荐文章于 2024-07-28 22:12:29 发布

耳东蜗牛

最新推荐文章于 2024-07-28 22:12:29 发布

阅读量1.5k

点赞数 1

分类专栏： CSS 文章标签： CSS文本属性 line-height vertical-align 文本水平对齐文本垂直居中

本文链接：https://blog.csdn.net/it_rod/article/details/80583490

版权

CSS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

缩进文本

将Web页面上一个段落的第一行缩进，这是一种最常用的文本格式化效果。

text-indent：[ <length> | <percentage> ] && hanging? && each-line?

适用于：块容器
<length>：用长度值指定文本的缩进。可以为负值。
<percentage>：用百分比指定文本的缩进(相对于父元素宽度)。可以为负值。
each-line：定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3，浏览器还没支持）
hanging：反向所有被缩进作用的行。（CSS3，浏览器还没支持）

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            .parent {
                width: 400px;
                background-color: yellow;
            }


            .text-indent {
                width: 200px;
                text-indent:100%;
                font-size: 16px;
                background-color: gray;
            }
        </style>
    </head>  
    <body>  
        <div class="parent">
            <div class="text-indent">
            Text-indent.
        </div>
        </div>
    </body>  
</html>

如图：当父元素为400px，子元素text-indent:100%;已经到了400px的位置，由此可见，百分比是相对父级块元素的。

水平对齐

适用于：块容器
left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
start：内容对齐开始边界。（CSS3）
end：内容对齐结束边界。（CSS3）
match-parent：这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的，计算值可以是 left 和 right 。（CSS3）
justify-all：效果等同于 justify，但还会让最后一行也两端对齐。（CSS3）

//测试justify
.justify {
    text-align: justify;
}

<div class="justify">
    WASHINGTON - US President Donald Trump and the top leader of the Democratic People's Republic of Korea (DPRK), Kim Jong Un, are scheduled to meet at 9:00 am Singapore time on June 12, the White House said on Monday. At a press briefing, White House spokesperson Sarah Sanders also said that the U.S. advance team now in Singapore "is finalizing logistical preparations and will remain in place until the summit begins." Noting that the US side is "actively" preparing for the meeting, she said that the US delegation in the demilitarized zone (DMZ) along the inter-Korean border continues diplomatic negotiations with the DPRK delegation. "The discussions have been very positive and significant progress has been made," she said. Besides the exchanges in Singapore and the DMZ, US Secretary of State Mike Pompeo last week met with Kim Yong Chol, vice chairman of the DPRK's ruling Workers' Party of Korea Central Committee, in New York.
</div>

我们看一下当前的结果：

当前页面文字为两端对齐，但是通过图片红色框中的内容可以看到出现了单词孤岛的现象，在对文本进行两端对齐处理时，需要调整单词的间距，此时会出现“单词孤岛”现象。这个结果不仅看起来很糟糕，而且损伤了可读性。有一些在网页上实现字符断行的方法，但是效果挺差的。如下图：

.justify {
    text-align: justify;
    word-break:break-all;           
}

CSS 文本（第三版）引入了一个新的属性hyphens。它接受三个值：none、manual 和auto。manual 是它的初始值，其行为正好对应了现有的工作方式：我们可以在任何时候手工插入软连字符，来实现断词折行的效果。很显然hyphens: none; 会禁用这种行为。但是chorme浏览器不支持当前属性，具体属性支持可以查询caniuse。而且我们还需要加上word-wrap:break-word;一起使用.

.justify {
    text-align: justify;

    word-wrap:break-word;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

我们可以看到红色框中有多个链接字符“-”。

垂直对齐

延申：块级元素和内联元素的高度由何而来？

块级元素：
设置height的属性的情况下，则是以height为准。
未设置height的情况下，则是以块级元素的内容为准。内容最终会到导向到行内元素（块级元素里的文本内容会被匿名块级盒包围）。

内联元素：
内联元素就复杂了，为什么呢？
以文字大小来看，当然是font-size越大，文字就越大。但是事情没有这么简单，前面文章中提到一张图，说的是7阶层叠水平。其中块级元素低于内联元素。
所以这里我们需要想到的是font-size的大小不一定会影响到包含块级元素的高度。这个的具体示例早已经有大牛测试过，请查看文章。结论是：line-height会决定块级元素的高度（没有设置height的情况下）

延申：文本内容的背景不会作用到半间距

<style>
    .block {
        background-color: gray;
        line-height: 70px;
    }
</style>

<div class="block">
    测试<font style="background-color: red;padding: 10px;margin: 10px;">文本内容的背景</font>不会作用到半间距。
</div>

下图当中背景颜色会作用到文本框加上padding，margin。但是不会作用到半间距。

延申：文本的内容区可能会大于font-size

* {
    font-family: "Comic Sans MS";
}

.inline {
    font-size: 80px; 
    line-height: 1em; 
    background-color:grey; 
    opacity: 0.7; 
    padding: 0;
}

<div style="background-color: teal;">
  <span class="inline">Test content area draw.</span>
</div>

这里的代码可以看到当前span标签的line-height为1em，也就是80px。所以父元素的高度就是80px。但是span元素的背景确实大于80px，这里测试的实际高度为：111px，而且随着字体的变化，字体的高度也会变化。这里是什么原因呢？

字体的em框和字符字形之间可能会存在差别。因为对于大部分字体，其em框的高度与字符字形的高度是不一致的。

CSS2.1中提出：“内容区的高度应当基于字体，但是这个桂芬没有指定如何基于字体确定内容区的高度。使用em框还是字体字形”。这里所以浏览器的操控空间就很大了。浏览器控制当前字体的内容区高度。

line-height

line-height是指文本行基线之间的距离，而不是字体的大小，它确定了将各个元素框的高度增加或者减少多少。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

垂直对齐 - vertical-align

先从div内容垂直居中讲起

先看一个例子：

.block-parent{
    background-color: teal;
    height: 200px;
}

.block-child {
    background-color: gray;
    height: 100px;
}

<h3>测试vertical-align的使用环境</h3>
<hr/>
<h5>父子元素为block</h5>
<div class="block-parent">
    <div class="block-child">
        block child
    </div>
</div>

首先我们使用line-height来实现子div居中，修改css文件如下：

.block-parent{
    background-color: teal;
    height: 200px;
    line-height: 200px;
}

.block-child {
    background-color: gray;
    height: 100px;
    line-height: 100px;
    display: inline-block;
}

这里简单说一下实现的原理：首先声明，这里的例子只是为了使用line-height。

通过前面学习的知识，我们了解到line-height是文本框和半间距的和。文本框的高度由font-size以及浏览器绘制字体的大小来决定。抛开文本框的高度来说，当line-height的高度增加的时候，那么在没有修改font-size的时候，只会增加上下半间距。并且上下半间距的距离相等。

所以现在代码的情况下，当line-height的高度与父元素的高度相等的时候，自然将父元素的content的内容看成一个line-height为200px的inline元素，但是这种情况不会应用到block子元素，所以将子元素设置为inline-block，并且line-height

设置为子元素的高度，因为line-height具有继承性。

vertical-align实现居中

上面的例子是使用line-height来实现居中的，我们再回忆一下上面的实现方式，是通过上下半间距的相等，然后将文本框放置到了垂直居中的位置。这里又要提起之前的线模型的基线了。

为什么提起基线呢？因为基线是文字垂直位置的初始位置（可以先不管这句话）。OK，既然提到了基线，那么我们是不是可以当作line-height的作用是为了将基线移动位置，当然居中的位置不是基线，而是基线 + 2/（x.height），也就是基线 + 0.5ex，x指的是字母x的高度。还记得四线三格，中心的位置就是基线 + 0.5ex。

走到这里，我们好像发现了关键所在，那就是移动当前inline内容的中线到的父元素文本内容的基线 + 0.5ex。

正好vertical-align:middle可以满足我们的需求：middle会把行内元素框的垂直中点与父元素基线上方0.5ex对齐。

.block-parent{
    background-color: teal;
    height: 200px;
}

.first-block-child {
    background-color: gray;
    height: 100px;
    display: inline-block;
    line-height: 100px;
    vertical-align: middle;
    
}

.second-block-child {
    background-color: gray;
    height: 200px;
    display: inline-block;
    line-height: 200px;
    vertical-align: middle;
    
}

<h3>测试vertical-align的使用环境</h3>
<hr/>
<h5>父子元素为block</h5>
<div class="block-parent">
    <div class="first-block-child">
        first block child
    </div>
    <div class="second-block-child">
         
    </div>
</div>

如图，当前我以class为second-block-child为基准将first-block-child居中。

总结：其实vertical-align的核心思想在于行内框，以行内框的不同位置作为基准与我们想要调节位置的元素对齐。

vertical-align简介

不具有继承性

baseline元素基线与父元素的基线对齐。对于一些可替换元素，比如 <textarea> ， HTML标准没有说明它的基线，这意味着对其使用这个关键字，各浏览器表现可能不一样。
sub元素基线与父元素的下标基线对齐。
super元素基线与父元素的上标基线对齐。
text-top元素顶端与父元素字体的顶端对齐。
text-bottom元素底端与父元素字体的底端对齐。
middle元素中垂线与父元素的基线加上小写x一半的高度值对齐。
<length>元素基线超过父元素的基线指定高度。可以取负值。
<percentage>同 <length> , 百分比相对于 line-height 。

以下两个值是相对于整行来说的：

top元素及其后代的顶端与整行的顶端对齐。
bottom元素及其后代的底端与整行的底端对齐。如果元素没有基线baseline，则以它的外边距的下边缘为基线。

baseline规则

baseline很重要，上面已经调到过一次，baseline是文字位置的最重要的基准，如果我们找到了baseline就好去处理当前文字行的位置布局。

inline-table元素的baseline是它的table第一行的baseline。
父元素【line box】的baseline是最后一个inline box 的baseline。
inline-block元素的baseline确定规则

规则1：inline-block元素，如果内部有line box，则inline-block元素的baseline就是最后一个作为内容存在的元素[inline box]的baseline，而这个元素的baseline的确定就要根据它自身来定了。

规则2：inline-block元素，如果其内部没有line box或它的overflow属性不是visible，那么baseline将是这个inline-block元素的底margin边界。

举例：规则2

<h3>测试vertical-align的baseline股则2</h3>
<hr/>
<div>
    <img src="./img/bg.jpg" alt="link"/>
</div>

如图：这是一张普通的图片，没有其他的css样式，当时我们可以看到当前红色框内有着一小块空白的地方（因为有着背景的原因，所以不是空白）。为什么说是规则二呢，目前好像没有匹配的项目，那么我们修改一点代码，加上几个xxx。

<h3>测试vertical-align的baseline股则2</h3>
<hr/>
<div>
    <img src="./img/bg.jpg" alt="link"/>
    <font>xxxxx</font>
</div>

我们现在可以看到当前的图片与文本内容xxxx的基线在同一水平线上。这里可能大家会有疑问，难道图片不会影响文字的行高吗？

首先还是要先明确一个观念，文字的大小由font-size决定，所以这里的xxxx的大小不会受到影响。第二个疑问就是xxxx的位置。会影响文本行内文字的位置通过前面的学习知道了，linge-height会影响文本的位置。但是这里也没有影响？原因如下：

前面文章CSS - 基本视觉格式化说过一句话如下：

非替换元素的内边距，边框和外边距对行内元素生成框(也就是说不会影响元素行内框的高度)没有垂直效果，也就是在垂直方向没有作用。但是背景存在效果。

这里的含义是什么呢？非替换元素不会影响到文本行的大部分样式展示，但是会影响背景，这里的背景指的是行高，但是不会影响line-height。可以这样理解：假如没有图片，文字正常展示，家上图片之后，图片的高度增加了文本行的高度，但是不影响文本行的line-height。所以文字随着img的高度乡下移动了，可以理解文本行的上空由于img的高度扩大了。请看下图当我相中文字的时候，可以看到当前的背景是和图片一致的。

消除上面例子中下部分的空白区域

消除例子中空白区域，我们要可以从几个方面去思考：

（1）将图片变成block元素，则可以了，因为block元素不收文本行的影响。

（2）文字下方存在空格是因为基线到底线之间的举例，那我们可以考虑将底线与基线之间的举例不体现在当前文本框中，那就是减少line-height。因为line-height为em框加上本间距，当line-height小于em框的时候，就会反向缩减距离，但是这个值不能为负数，否则没有效果了。这种方式不推荐，因为距离还是会存在与当前文档中的。

（3）设置font-size为0，这样可以将文本行直接去除，这样默认的base-line也不会有影响了。

（4）使用其他的对齐方式：vertical-align:bottom | vertical-align:middle | vertical-align:top

字间隔和字母间隔

字间隔 word-spacing

word-spacing：normal | <length> | <percentage>

继承性：有
normal：默认间隔
<length>：用长度值指定间隔。可以为负值。
<percentage>：用百分比指定间隔。可以为负值。（CSS3）

.percentage {
    word-spacing: 0.5em;
}

兼容性需要注意：

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
<percentage>	6.0-11.0	2.0-37.0	4.0-41.0	6.0-8.0	15.0-27.0	6.0-8.3	2.1-4.4.4	18.0-40.0

字母间隔 letter-spacing

letter-spacing：normal | <length> | <percentage>

继承性：有
normal：默认间隔
<length>：用长度值指定间隔。可以为负值。
<percentage>：用百分比指定间隔。可以为负值。（CSS3）

兼容性如下：

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
<percentage>	6.0-11.0	2.0-37.0	4.0-41.0	6.0-8.0	15.0-27.0	6.0-8.3	2.1-4.4.4	18.0-40.0

文本转换

text-transform：none | capitalize | uppercase | lowercase | full-width

继承性：有
none：无转换
capitalize：将每个单词的第一个字母转换成大写
uppercase：将每个单词转换成大写
lowercase：将每个单词转换成小写
full-width：将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）

兼容性如下：