HTML-CSS文字篇

叁歲伎倆 2023-10-06 16:57 26阅读 0赞

## 居中 ##

### 文字垂直居中 ###

> 行高(line height)  
> 行高指的是文字占有的实际高度  
> 可以通过line-height来设置行高  
> 行高可以直接指定一一个大小(px em)  
> 也可以直接为行高设置个整数  
> 如果是一个整数的话，行高将会是字体的指定的倍数  
> 行高经常还用来设置文字的行间距  
> 行间距=行高-字体大小

> 字体框 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度 行高会在字体框的上下平均分配

<style>
    .item {
      width: 100%;
      height: 25px;
    /* 可以将行高设置为和高度一样的值， 使单行文字在一一个元素中垂直居中
    文字垂直居中，高度和上面的高度一样 */
      line-height: 25px;
    }
     <style>
     
     <div class="item">
        <a href="#">手机</a>/
        <a href="#">运营商</a>/
        <a href="#">数码</a>
     </div>

![在这里插入图片描述][20210322232425258.png]

## 对齐 ##

### 水平对齐 ###

text-align文本的水平对齐  
可选值:  
left左侧对齐  
right右对齐  
center居中对齐  
justify两端对剂

### 垂直对齐 ###

vertical-align设置元素垂直对齐的方式  
可选值:  
baseline默认值基线对齐  
top顶部对齐  
bottom底部对齐  
middle居中对齐  
也可以直接指定一个确定的值

vertical-align：200px

### 文字加粗 ###

font-weight:bold

### 去除下划线 ###

text-decoration: none;
    拓展：
    	text-decoration设置文本修饰
    	可选值:
    	none 什么都没有
    	underline下划线
    	line-through删除线
    	overline上划线

## 文本内容过多显示省略号 ##

<style>
    #box2{
         
    	width: 200px;
    /*
    运用：文本内容过多显示省略号
    white-space设置网页如何处理空白
    可选值: 
    	normal正常
    	nowrap不换行
    	pre保留空白
    */
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }
    </style>

![在这里插入图片描述][20210323113726203.png]

[20210322232425258.png]: https://img-blog.csdnimg.cn/20210322232425258.png
[20210323113726203.png]: https://img-blog.csdnimg.cn/20210323113726203.png

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML-CSS文字篇

居中文字垂直居中 > 行高(line height) > 行高指的是文字占有的实际高度 > 可以通过line-height来设置行高 > 行高可以直接

叁歲伎倆/ 2023年10月06日 16:57/ 0 赞/ 27 阅读

相关 HTMLCSS学习笔记（二十三）GRID布局

GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的

拼搏现实的明天。/ 2023年10月06日 15:28/ 0 赞/ 88 阅读

相关 HTMLCSS学习笔记（二十四）浏览器兼容

浏览器兼容浏览器 ![18d351598399497bb326248e9b1219fe.png][] 浏览器大战 ![32ff149e3df74d5e8868

ゝ一纸荒年。/ 2023年10月06日 15:28/ 0 赞/ 86 阅读

相关 HTMLCSS学习：移动端项目准备工作（笔记二十）

移动端项目准备工作 meta标签的设置  <meta name="viewpor

阳光穿透心脏的1/2处/ 2023年10月06日 15:26/ 0 赞/ 29 阅读

相关 HTMLCSS小白——浮动模型、两个经典bug（bfc解决四种方式）、导航栏、伪元素、文字溢出处理

文字溢出处理 <!DOCTYPE html> <html> <head> <title></title> <style typ

叁歲伎倆/ 2023年07月10日 11:30/ 0 赞/ 42 阅读

相关 HTMLCSS小白——盒子模型，绝对定位和相对定位

<!DOCTYPE html> <html> <head> <title></title> <style type="text/cs

水深无声/ 2023年07月10日 08:10/ 0 赞/ 38 阅读

相关 htmlcss使用及html5新特性笔记整理

【html基础】 Hyper text markup language 超文本标签语言。不是一种编程语言，而是一种标记语言标记语言是一套标记标签开发工具

女爷i/ 2023年03月03日 05:59/ 0 赞/ 22 阅读

相关音乐社交类登录注册htmlcss3+html5模板

[下载地址][Link 1] 一款通用的社交平台网站登录注册表单切换页面模板。支持手机验证码，图片验证码，第三方登录等功能。 ![8832d92220fd03c4fcef1

超、凢脫俗/ 2022年09月14日 00:27/ 0 赞/ 267 阅读

相关深入浅出 GAN·原理篇文字版（完整）| 干货

常见GAN 最后，作为 GAN 专题的结尾，我们列举一下目前常见的 GAN 模型（可以根据 arxiv id 去寻找、下载文献），欢迎补充。 GAN - Ian Goodf

女爷i/ 2022年06月10日 13:27/ 0 赞/ 182 阅读

相关 Toast显示文字、图片、文字+图片

1、显示文字： Toast.makeText(this, "文字显示", Toast.LENGTH_LONG).show(); 2、显示图片： Toast

素颜马尾好姑娘i/ 2022年05月29日 03:22/ 0 赞/ 309 阅读