文本样式——CSS

最新推荐文章于 2024-04-30 19:38:51 发布

_洋

最新推荐文章于 2024-04-30 19:38:51 发布

阅读量259

点赞数

分类专栏： HTML+CSS 文章标签： css3

本文链接：https://blog.csdn.net/mantou_riji/article/details/124132119

版权

HTML+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

文本的水平对齐
文本的垂直对齐
文本下划线
空格、换行的处理
省略号文本效果

文本的水平对齐

text-align文本的水平对齐

left 左侧对齐
right右对齐
center居中对齐
justify两端对齐：文字的两端和边框都对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 500px;
            border: 1px brown solid;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque tenetur provident sequi explicabo, aut magni accusantium nemo quo neque esse doloremque libero doloribus dolore laudantium fugiat culpa optio sapiente amet!</div>
    
</body>
</html>

输出：
在这里插入图片描述

文本的垂直对齐

文本的垂直对其不是说在盒子模型中垂直对其，应用于一行文字中有比正常文字小的文字，让这个小的文字和正常文字垂直居中对齐。
vertical-align设置元素垂直对齐的方式
可选值：

baseline 默认值，基线对齐
top顶部对齐
bottom底部对齐
middle居中对齐（使该文字的中线和正常文字一样）

基线：（字母和文字的基线是不一样的）
在这里插入图片描述
eg：默认情况下和基线对其：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            border: 1px brown solid;
            font-size: 50px;
        }
        span{
            font-size: 20px;
            border: turquoise 1px solid;
        }
    </style>
</head>
<body>
    <div>你好，Hello<span>七月</span>夏天</div>
    
</body>
</html>

在这里插入图片描述
bottom：

top:

在这里插入图片描述
middle:

文本下划线

text-decoration设置文本修饰。——IE不支持
可选值:

none 什么都没有
underline下划线
line-through删除线
overline 上划线

还可以设置颜色和样式

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            text-decoration: underline brown dotted;
        }
        .box2{
            text-decoration:none;
        }
         .box3{
            text-decoration: line-through;
        }
        .box4{
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <div class="box1">今天天气真好！</div><br>
    <div class="box2">今天天气真好！</div><br>
    <div class="box3">今天天气真好！</div><br>
    <div class="box4">今天天气真好！</div><br>
</body>
</html>

输出：
在这里插入图片描述

空格、换行的处理

white-space设置网页如何处理空格、换行
可选值:

normal：正常。默认情况下，多个空格和换行都处理为一个空格。box横向填满之后，就在空格处进行换行
nowrap：不换行。多个空格和换行都处理为一个空格。box横向填满之后，不换行。
pre保留空白,保留空格和换行

省略号文本效果

想要设置省略号，需要为容器设置下面4个属性：

width: 200px;
 white-space: nowrap;
 overflow: hidden;
 /* 覆盖的部分以省略号显示 */
 text-overflow: ellipsis;

eg
:
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
          width: 200px;
          white-space: nowrap;
          overflow: hidden;
          /* 覆盖的部分以省略号显示 */
          text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum            dolor sit amet consectetur adipisicing elit. Enim voluptate itaque neque!
    Expedita animi ab commodi odio pariatur doloribus nostrum qui non similique, nihil neque. 
    Odio magnam quibusdam eligendi fuga!</div>
    
</body>
</html>

输出：
在这里插入图片描述

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本样式——CSS

文章目录文本的水平对齐文本的垂直对齐文本下划线空格、换行的处理省略号文本效果文本的水平对齐text-align文本的水平对齐left 左侧对齐right右对齐center居中对齐justify两端对齐：文字的两端和边框都对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div{ w
复制链接

扫一扫