从零开始前端学习[11]:控制文本显示的样式属性

最新推荐文章于 2022-11-07 09:25:29 发布

^_^ 小小码nong

最新推荐文章于 2022-11-07 09:25:29 发布

阅读量903

点赞数 2

分类专栏： # 1.从零开始挑战前端文章标签：前端控制文本样式文本样式属性文本样式文本属性

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78034737

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

控制文本显示的样式属性

text-align 文字水平显示方式
line-height 文字垂直显示方式
text-decoration 文本的修饰方式
text-indent 文本的缩进方式
letter-spacing 文本中字母的间距(对单个汉字或英文字母)
word-spacing 词间距(对用空格隔开的汉语词语或单词作用)
word-break 强制换行
white-space 强制不换行
文本超出的时候的处理方式

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

text-align 文字水平显示方式

text-align属性是文字水平的显示方式，主要时候控制文字在水平方向的3中状态：left居于左侧显示，right 居于右侧显示，center居中显示

text-align:left; //居左侧显示
text-align:right; //居右侧显示
text-align:center; //居中显示

注意：text-align不仅仅对我们的文本有用，对我们的行级元素以及img标签都是有用的。，注意text-align是给文本的父级标签设置的，并且父级元素必须是块级元素，如果是行级元素的话，默认是内容撑开宽高的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>text-align文本样式显示</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main{width: 1200px;border: 1px solid red;margin: 50px auto}
    .main .text{text-align: left}
    .main .span_style{text-align: center}
    .main .img_style{text-align: right;}
  </style>
</head>
<body>
  <div class="main">
    <div class="text">
      关关雎鸠，在河之洲。窈窕淑女，君子好逑。<br>
      参差荇菜，左右流之。窈窕淑女，寤寐求之。<br>
      求之不得，寤寐思服。悠哉悠哉，辗转反侧。<br>
      参差荇菜，左右采之。窈窕淑女，琴瑟友之。<br>
      参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。<br>
    </div><br>
    <div class="span_style">
      <span>长歌行</span><br>
      <span>青青园中葵，朝露待日晞。</span><br>
      <span>阳春布德泽，万物生光辉。</span><br>
      <span>常恐秋节至，焜黄华叶衰。</span><br>
      <span>百川东到海，何时复西归？</span><br>
      <span>少壮不努力，老大徒伤悲！</span>><br>
    </div>
    <div class="img_style">
      <img width="100px" height="100px" src="http://img002.21cnimg.com/photos/album/20150702/m600/2D79154370E073A2BA3CD4D07868861D.jpeg" alt="">
    </div>
  </div>
</body>
</html>

显示效果如下所示:

这里写图片描述

line-height 文字垂直显示方式

line-hight主要是行高，文字垂直显示方式，参考前一篇博客文字样式中的行高

值为像素，当给定的值和父级盒子的高度一致时，文字会在元素中垂直居中显示

text-decoration 文本的修饰方式

text-decoration主要是用于文本的修饰方式,文本修饰方式常用为四种属性值，
none表示默认，即没有文本修饰样式，
underline定义文本下的一条线，类似ins标签，
overline定义在文本上的一条线
line-through定义穿过文本的一条线，类似del标签

使用的方式如下所示:
text-decoration:none; //默认，定义标准的文本
text-decoration:underline; //定义文本下的一条线
text-decoration:overline; //定义文本上的一条线
text-decoration:line-through; //定义穿过文本的一条线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main{width: 1200px;margin: 50px auto;border:1px solid deeppink;}
    .main .text_decoration_nono{
      text-decoration: none;
    }
    .main .text_decoration_overline{
      text-decoration: overline;
    }
    .main .text_decoration_underline{
      text-decoration: underline;
    }
    .main .text_decoration_line_through{
      text-decoration: line-through;
    }
  </style>

</head>
<body>
  <div class="main">
    <div class="text_decoration_nono">默认，定义标准的文本</div><br>
    <div class="text_decoration_underline">定义文本下的一条线</div><br>
    <div class="text_decoration_overline">定义文本上的一条线</div><br>
    <div class="text_decoration_line_through">定义穿过文本的一条线</div><br>
  </div>
</body>
</html>

显示的效果如下所示:

这里写图片描述

text-indent 文本的缩进方式

text-indent主要的意思是首行缩进，大概的使用场景就是缩进的距离用来做图片加载，或者是一个段落的开头往往需要2个空格，那么浏览器不会识别多个空格，多个空格仅仅只会去加载一个。这就需要用到我们的首行缩进
text-indent：的属性值可以是px，可以是em，可以是rem等
如：

text-indent:20px;
text-indent:2em;
text-indent:2rem;
text-indent:20%;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .main{width: 1200px;margin: 50px auto;border:1px solid deeppink;}
        .main .px p{text-indent: 2em;}
        .main .em span{text-indent: 20px}
        .main .rem{text-indent: 2rem}
  </style>
</head>
<body>
  <div class="main">
    <div class="px">
      <p>一袭素香，两袖清绝，浩渺天地间惊鸿一眸，袅娜娉婷的娇艳月容便落入古往今来爱梅之人的轻盈文字里，久了便岁月生香。书一纸墨梅清痕，用冰冷的指尖在嫩寒清晓里写下孑然一身的随遇而安。弥望时光，不管是凌寒独自开的肃然缄默，还是输梅一段香的千古绝赞，梅花，在百花齐眠的冷冬，它，终究是茕茕孓立的寂莫。</p>
    </div><br>
    <div class="em">
      <span>一直也想落笔梅香满袖的楚楚动人，奈何心懒手拙，从来都是看他人煮字暖情的精致，听寒香梅雪蕊绽花落的慨叹，然后也跟着低眉浅笑温暖的期许。如今又是岁幕天寒，再次遇梅，内心倒多出几分怜惜，误入繁苑，怎知那抹疏影倾城的空灵洁净是否甘心尽洗铅华的寂寞？那不与凉风的娇媚怎知不是花蕊深处轻轻的遗憾？</span>
    </div><br>
    <div class="rem">
        都说清梅孤傲圣洁，曾经我也这样觉得，如今却不以为然。世人总爱将自己的想当然强加于喜欢的花叶山水上，仅仅因为在残枝败柳的冬季唯有它傲放于天地，便说它一任群芳妒，因为数九寒天里物以稀为贵的梅红雪白，便说它无意苦争春。却忘了那暗香徐徐的素梅，一直是默然于世，恬淡不惊，在冬日的宁静里沉淀着自己的情绪。
    </div>
  </div>
</body>
</html>

注意：text-indent属性是针对块级元素的，行级元素默认是内容撑开高度，所以设置text-indent是无效的

显示效果如下所示:
这里写图片描述

letter-spaceing 文本中字母的间距(对单个汉字或英文字母)

letter-spacing，其中letter表示字母，文字的意思，spacing表示间隔，所以语义解释为letter-spacing即为字母间距，
letter-spacing的属性值为px
即

letter-spacing:10px;//这样的话，文字就不会显得拥挤

在上个代码上面进行修改，即可看出来效果

    .main .px p{text-indent: 2em;letter-spacing: 10px;}
    .main .em span{text-indent: 20px;letter-spacing: 20px}
    .main .rem{text-indent: 2rem;letter-spacing: 30px}

显示: 这里写图片描述

从上面可以看到，这个属性是不分行块的，行级元素也是可以有字间距的

word-spacing 词间距(对用空格隔开的汉语词语或单词作用)

与上面的letter-spacing相互对应的，即单词间距，首先要确定是单词，因为每个词语之间是要有空格进行分割的，连在一起的一句话并不叫单词，所以word-spacing即为词间距
使用方式与letter-spacing类似：

word-spacing:20px;//将每个词语的间距放到了20px;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .main{width: 1200px;margin: 50px auto;border:1px solid deeppink;}
        .main .word_spacing{word-spacing: 30px}
        .main .nomal{word-spacing: 30px}
  </style>
</head>
<body>
<div class="main">
  <div class="word_spacing">
    i like study html and css!!!
  </div>
  <div class="nomal">
    与上面的letter-spacing相互对应的，即单词间距，首先要确定是单词，因为每个词语之间是要有空格进行分割的，连在一起的一句话并不叫单词，所以word-spacing即为词间距
  </div>
</div>
</body>
</html>

显示效果如下所示：
这里写图片描述
在上面的单词间距被拉大到了30px，因为它们是一个个单词，但是再后一句中并没有发生改变，因为它是一句话，并不是词语。

word-break 强制换行

word-break即是强制换行的意思，有时候我们的标签宽度是有限的，这个时候可能就需要换行，而work-break是支持在单词内换行，即是剩余的空格不足以显示完整单词的时候，会将单词分隔，然后上下显示各一部分

word-break:break-all;
word-break:keep-all;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .main{width: 1200px;margin: 50px auto;border:1px solid deeppink;}
        .main .demo1{
          width: 100px;
          border: 1px solid green;
        }
        .main .demo2{
          width: 100px;
          word-break:break-all;
          border: 1px solid blue;
        }
  </style>
</head>
<body>
  <div class="main">
    <div class="demo1">
       1 i want to be a good coder!!!!
    </div><br>
    <div class="demo2">
       2 i want to be a good coder!!!!
    </div>
  </div>
</body>
</html>

显示如下所示:

这里写图片描述

从上面就可以看出来，设置了break-all的属性值的话，这个时候换行是将单词进行了拆分，默认的情况是不支持单词内换行的

white-space 强制不换行

white-space是强制是否换行的意思，因为有时候布局的情况下，会遇到超出的文字不允许显示到第二行，那么这个时候就需要white-space与文本超出处理方式进行配合使用

white-space:nowrap;//强制不换行
white-space:wrap;//换行(默认是换行的)

在上述代码上面做点修改:

        .main .demo2{
          width: 100px;
          border: 1px solid blue;
          white-space: nowrap;
        }

显示效果如下:
这里写图片描述
demo2的显示是不换行的，但是会出现一个问题就是它超出了我们原来的父级区域，超出了父级显示，所以需要结合文本超出的时候的来进行处理

文本超出的时候的处理方式

文本超出的时候的处理方式，即文本在不换行的情况下，超出父级的时候，所有超出的文本全部以“…”的形式进行显示
只要记住这三个属性配合使用即可:

      white-space: nowrap; //强制不换行
      overflow:hidden;  //超出隐藏
      text-overflow: ellipsis; //文本超出显示的样式

对上面的代码进行修改:

        .main .demo2{
          width: 100px;
          border: 1px solid blue;
          white-space: nowrap;
          overflow:hidden;
          text-overflow: ellipsis;
        }

显示如下所示:

这里写图片描述

可以看到demo2中显示的超出文本显示的部分全部以…的形式进行展示，但是…是居中显示的。

欢迎持续访问博客

^_^ 小小码nong

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[11]:控制文本显示的样式属性

控制文本显示的样式属性text-align 文字水平显示方式line-height 文字垂直显示方式text-decoration 文本的修饰方式text-indent 文本的缩进方式letter-spacing 文本中字母的间距(对单个汉字或英文字母)word-spacing 词间距(对用空格隔开的汉语词语或单词作用)word-break 强制换行white-space 强
复制链接

扫一扫

专栏目录