• 文本样式（垂直、水平）

    目录

    一、垂直文本对齐方式（vertical-align）

    1、可选值

    2、像素

    二、文本对齐方式（text-align）

    三、文字底部特殊效果（txt-decoration）

    四、空白格（white-space）

    五、省略多余字体并添加省略号

    六、代码

    1、例子一二

    2、例子三四

    一、垂直文本对齐方式（vertical-align）

    1、可选值

    （1）默认值，baseline基线对齐，是英文字母的基本对齐方式

    （2）top顶端对齐

    （3）bottom底部对齐

    （4）middle中间对齐，参考值是小写字母x的中间位置（此设置方式某些情况可能与baseline效果相同）

    2、像素

    像素大小，例如100px，向上对齐100px

    二、文本对齐方式（text-align）

    （1）left左对齐

    （2）right右对齐

    （3）center居中对齐

    （4）justify两边对齐，文本对齐常用方式（符合写文章的格式）

    三、文字底部特殊效果（txt-decoration）

    （1）overline上划线

    （2）underline下划线

    （3）line-through删除线

    （4）none多用于删除a链接下划线

    四、空白格（white-space）

    （1）normal正常

    （2）nowrap不换行

    （3）pre保留换行与空白，用于匹配代码格式中的文本

    五、省略多余字体并添加省略号

    1. white-space: nowrap;
    2. overflow: hidden;
    3. text-overflow: ellipsis;

    六、代码

    1、例子一二

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>文本样式title>
    8.     <style>
    9.         div{
    10.             border: solid red 1px;
    11.             font-size: 40px;
    12.         }
    13.         span{
    14.             /* vertical-align（垂直文本对齐方式）：
    15.             baseline基线对齐，多见于字母的对齐
    16.             top顶端对齐
    17.             bottom底部对齐
    18.             middle中间对齐，是小写x的中间
    20.             或者以像素大小，例如100px，向上对齐100px
    21.              */
    22.             font-size: 20px;
    23.             border: solid blue 1px;
    24.             vertical-align: baseline;
    25.         }
    26.         p{  
    27.             /* 
    28.             text-align(文本对齐方式)：
    29.             left左对齐
    30.             right右对齐
    31.             center居中对齐
    32.             justify两边对齐（符合写文章的格式）
    33.             
    34.             */
    35.             border: 1px solid black;
    36.             width: 400px;
    37.             /* text-align: justify; */
    38.             text-align: right;
    39.         }
    40.     style>
    41. head>
    42. <body>
    43.     <div>This is an<span>applespan>! But you can't eat itdiv>
    44.     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ratione unde nemo dolores vitae, doloribus eos veritatis quaerat iste pariatur natus suscipit, debitis commodi ut, nulla culpa voluptatibus aperiam consequatur!p>
    45.     
    46. body>
    47. html>

    2、例子三四

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>文本样式2title>
    8.     <style>
    9.         .box1{
    10.             /* 将多余字体省略不显示并增加省略号的方法 */
    11.             width: 200px;
    12.             white-space: nowrap;
    13.             overflow: hidden;
    14.             text-overflow: ellipsis;
    15.             /* 
    16.             white-space（空白格）：
    17.             1.normal正常
    18.             2.nowrap不换行
    19.             3.pre保留换行与空白，用于匹配代码中的文本
    20.             */
    21.         }
    22.         .box2{
    23.             /* 
    24.             txt-decoration可选值：
    25.             1.overline上划线
    26.             2.underline下划线
    27.             3.line-through删除线
    28.              */
    29.             text-decoration: line;
    30.         }
    31.         .box3{
    32.             white-space: pre;
    33.         }
    34.     style>
    35. head>
    36. <body>
    37.     <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, recusandae voluptatibus, sed iusto quia dolores nam veniam sunt, natus praesentium architecto corrupti officiis omnis eius reprehenderit ratione est ea ipsam!div>
    38.     <div class="box2">hello i'm li huadiv>
    39.     <div class="box3">hello shit
    40.         aa
    41.             aa
    42.                 aa
    43.     div>
    44. body>
    45. html>

  • 相关阅读:
    网络面试题汇总
    【Verilog 流水线设计】以全加器为例阐述流水线设计的影响
    Qt各种指针的使用总结
    【数据脱敏】身份证，手机号，密码数据脱敏hutool
    elements ui vue table 多选操作
    ORM概念
    获得列表中的空的段的起始位置（Python）
    AntSK：打造你的本地AI知识库——离线运行详细教程
    性能测试-基础篇
    期货十三篇 第四篇 开仓篇
  • 原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126280497