（一）文本

1.大小写转换

text-transform属于处理文本的大小写，有4个值：

  • none（默认值）
  • uppercase（全部大写）
  • lowercase（全部小写）
  • capitalize（首字母大写）
例子
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

 .t1{

  text-transform:uppercase;

 }

 .t2{

  text-transform:lowercase;

 }

 .t3{

  text-transform:capitalize;

 }

</style>

</head>

<body>

<p>ssss</p>

<p class="t1">sss</p>

<p class="t2">AAA</p>

<p class="t3">string</p>

</body>

</html>

2.文本线条

text-decoration有5个值：

  • none
  • underline
  • overline
  • line-through
  • blink（以前只有Firefox支持，现在也不支持了）
例子
<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t1{

   text-decoration:underline;

  }

  .t2{

   text-decoration:overline;

  }

  .t3{

   text-decoration:line-through overline underline;

  }

 </style>

</head>

<body>

 <p>ssss</p>

 <p class="t1">sss</p>

 <p class="t2">AAA</p>

 <p class="t3">string</p>

</body>

</html>

3.文本阴影

text-shadow属性，参数顺序为：阴影颜色，水平偏移量，垂直偏移量，模糊度

例子
<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t1{

   text-shadow:rgb(0,0,255) 5px 5px 5px;

  }

  /*.t2{

   text-decoration:overline;

  }

  .t3{

   text-decoration:line-through;

  }*/

 </style>

</head>

<body>

 <!-- <p>ssss</p> -->

 <p class="t1">sss</p>

 <!-- <p class="t2">AAA</p>

 <p class="t3">string</p> -->

</body>

</html>

4.文本空白

white-space属性，默认值normal，空白会被浏览器忽略。

例子：如果打出多个空白，除了使用 
与转义字符&nbsp；之外还可以：
 <style type="text/css">

  .t1{

   white-space:pre;

  }

  </style>

  <body>

 <p class="t1">sss      eeeeee wwww

 wwwwwww</p>

</body>

但是上述操作不会自动换行。

white-space:pre-line;//可以自动换行，但是会合并空格


white-space:pre-wrap;;//可以自动换行，不会合并空格


white-space:nowrap;//不换行，合并空格

5.文本溢出

overflow：hidden;隐藏
text-overflow:ellipsis;(把隐藏的内容用…代替）

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t1{

   width: 200px;

   border:solid 1px red;

   white-space:nowrap;

   overflow: hidden;

   text-overflow:ellipsis;

  }

</style>

</head>

<body>

 <!-- <p>ssss</p> -->

 <p class="t1">

  sss      eeeeee wwwwdddsdsdsds fff

  属性你手机

     </p>

</body>

</html>

当鼠标放上去是，让隐藏的内容出现

p:hover{

   overflow: visible;

  }
  • visible：是默认值，内容不会被修剪，会显示在元素框外
  • hidden：内容被隐藏，且其余内容不可见
  • scroll：内容被修剪，但是浏览器会显示滚动条以便查看其他内容
  • auto：如果内容被修剪，则浏览器会显示滚动条以便查看其他内容

6.对齐与缩进

text-indent，设置首行缩进

例子
<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t1{

   white-space:pre-line;

   text-indent:20px;

  }

 </style>

</head>

<body>

 <p class="t1">sss      eeeeee wwwwdddsdsdsds fff

  属性你手机

     </p>

</body>

</html>

text-indent的值设置像素时，如果字体发生变化，它缩进的大小就会改变，耦合行很强

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t1{

   font-size: 50px;/*将字体大小改为20px*/

   white-space:pre-line;

   text-indent:20px;

  }

 </style>

</head>

<body>

 <p class="t1">sss      eeeeee wwwwdddsdsdsds fff

  属性你手机

     </p>

</body>

</html>

现在将text-indent设置为2em

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t1{

   font-size: 50px;/*将字体大小改为20px*/

   white-space:pre-line;

   text-indent:2em;

  }

 </style>

</head>

<body>

 <p class="t1">提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、

  葡萄牙语、越南语、印尼语、意大利语全文翻译、网页翻译、文档翻译服务。

     </p>

</body>

</html>

text-align只对元素中的文本有效，对元素无效
值：left，center，right，justify

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/c**ss">

  .t1{

   text-align: center;

  }

  .t2{

   text-**align:left;

  }

  .t3{

   text-align:right;

  }

</style>

</head>

<body>

 <p class="t1">t1今天真好</p>

 <p class="t2">t2今天真好</p>

 <p class="t3">t3今天真好</p>

</body>

</html>

justify可以实现两端对齐（两端对齐是要求有宽度的，需要对文本外的框设置宽度；且只有一行填满才会显示两端对齐，一行没有填满，就不会显示）

例子
<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t4{

   width: 200px;

   border:  solid 1px red;

   text-align: justify;

  }

 </style>

</head>

<body>

 <p class="t4">今天真好今天真好今天真好今天真好今天真好今天真好</p>

</body>

</html>

改进：

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .t4{

   width: 200px;

   border:  solid 1px red;

   text-align: justify;

  }

  p span{

   display: inline-block;

   width: 100%;

  }

  /* 或者p:after{

   content: "";

   display: inline-block;

   width: 100%;

  }*/

 </style>

</head>

<body>

 <p class="t4">今天真好今天真好今天真好今天真好<span></span></p>

</body>

</html>

垂直对齐：
vertical-align，使用满足两点，文本，inline类元素或表格单元格

值 描述
baseline 默认。元素放在父元素的基线上
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放在父元素中部
bottom 把元素的顶端与行中最低元素顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length
% 使用line-height属性的百分比值来排列此元素允许使用负值

Html文本学习内容-2的更多相关文章

  1. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  2. Excel自文本导入内容时如何做到单元格内换行

    前言:今天在处理数据的时候,在数据库中用到了\n换行符号,目的是在同表格内做到数据多行显示,比如  字段名1  字段名2  字段名3  1 数据一行 数据二行 数据三行 例子是在sql查询后的结果  ...

  3. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. STM32学习内容和计划

    一.STM32学习内容(流程) 1.学习STM32开发流程 ①MDK使用.建立工程.调试等 ②库开发方法 2.学习STM32常用外设开发 ①GPIO ②中断 ③定时器 ④串口 ⑤CAN 3.学习STM ...

  5. u-boot代码学习内容

    前言  u-boot代码庞大,不可能全部细读,只能有选择的读部分代码.在读代码之前,根据韦东山教材,关于代码学习内容和深度做以下预先划定. 一.Makefile.mkconfig.config.mk等 ...

  6. 2.Freshman阶段学习内容的确定

    我刷知乎.在知乎上答题的程序员,不是很牛逼就是更牛逼,说起各种系统.各种系统的各种版本.各种语言.数据库.算法.IT届的各种圣战都有板有眼.信手拈来.头头是道,不得不服.这导致了一些非常严重的问题:我 ...

  7. Swift - 文本输入框内容改变时响应，并获取最新内容

    1,问题描述 有时我们开发的时候需要先把“确认”按钮初始设置为不可用,当文本框中输入文字以后,再将输入按钮变为可用. 2,实现原理 (1)要检测文本框内容的变化,我们需要让新界面的Controller ...

  8. 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)

    input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...

  9. C# 全选中数字文本框内容

    /// <summary>        /// 全选中数字文本框内容        /// </summary>        /// <param name=&quo ...

  10. python中用xpath匹配文本段落内容的技巧

    content = item.xpath('//div[@class="content"]/span')[0].xpath('string(.)') content = item. ...

随机推荐

  1. Parallel 与 ConcurrentBag<T> 这对儿黄金搭档

    〇.前言 日常开发中经常会遇到数据统计,特别是关于报表的项目.数据处理的效率和准确度当然是首要关注点. 本文主要介绍,如何通过 Parallel 来并行处理数据,并组合 ConcurrentBag&l ...

  2. Hexo博客yilia主题使用cnzz统计网站访问量

    使用友盟第三方的统计插件,网址:http://www.umeng.com/ 进入网站先注册账号然后根据下列图片进入添加站点. 添加站点,自己搭建的博客,需要统计访问量的网站(这里加入我的博客网站),然 ...

  3. Unity UGUI的VerticalLayoutGroup（垂直布局）组件的介绍及使用

    Unity UGUI的VerticalLayoutGroup(垂直布局)组件的介绍及使用 1. 什么是VerticalLayoutGroup组件? VerticalLayoutGroup是Unity ...

  4. redis 中的 list

    lpush K1 V1 V2 V3   左边加入list rpush k1 v1 v2 v3 右边加入list lpop k1 左边吐出一个值 rpop k1 右边吐出一个值 lrange k1 0 ...

  5. burp抓包iPhone手机

    https://blog.csdn.net/weixin_43965597/article/details/107864200

  6. 文心一言 VS 讯飞星火 VS chatgpt （73）-- 算法导论7.1 4题

    四.如何修改 QUICKSORT,使得它能够以非递增序进行排序? 文心一言: 快速排序(Quicksort)是一种常用的排序算法,基于分治策略进行设计.默认情况下,快速排序会以递增序进行排序.若想修改 ...

  7. Prototype 原型模式简介与 C# 示例【创建型4】【设计模式来了_4】

    〇.简介 1.什么是原型模式? 一句话解释:   针对比较耗时的对象创建过程,通过原型的 Clone 方法来克隆对象,而非重新创建. 原型设计模式(Prototype Design Pattern)是 ...

  8. 【pytorch】目标检测：YOLO的基本原理与YOLO系列的网络结构

    利用深度学习进行目标检测的算法可分为两类:two-stage和one-stage.two-stage类的算法,是基于Region Proposal的,它包括R-CNN,Fast R-CNN, Fast ...

  9. 《深入理解Java虚拟机》读书笔记：方法调用

      方法调用并不等同于方法执行,方法调用阶段唯一的任务就是确定被调用方法的版本(即调用哪一个方法),暂时还不涉及方法内部的具体运行过程.在程序运行时,进行方法调用是最普遍.最频繁的操作,但前面已经讲过 ...

  10. 谁家面试往死里问 Swagger 啊？

    大家好,我是小富- 前言 说个挺奇葩的事,有个老铁给我发私信吐槽了一下它的面试经历,他去了个国企单位面试,然后面试官跟他就Swagger的问题聊了半个多小时.额- 面试嘛这些都不稀奇,总能遇到是千奇百 ...