文本阴影 text-shadow

应用于阴影文本

语法： text-shadow: h-shadow v-shadow blur color

  • h-shadow 水平偏移
  • v-shadow 竖直偏移
  • blur 模糊距离，模糊是向外的，不存在负值
  • color 阴影颜色

https://www.w3school.com.cn/cssref/pr_text-shadow.asp

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style type="text/css">

    div {

        font-size: 50px;

        text-shadow: 3px 3px 3px #00f;

    }

</style>

<body>

    <div>text shadow</div>

</body>

</html>

文本轮廓 text-outline

https://www.w3school.com.cn/cssref/pr_text-outline.asp

文本换行

word-break

定义自动换行的处理方法

语法： word-break: normal | break-all | keep-all

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style type="text/css">

    p {

        width: 150px;

        height: 100px;

        background: #abcdef;

        font-size: 12px;

    }

    .en-normal {

            word-break: normal;

    }

    .en-break-all {

        word-break: break-all;

    }

    .en-keep-all {

        word-break: keep-all;

    }

    .cn-normal {

        word-break: normal;

    }

    .cn-break-all {

        word-break: break-all;

    }

    .cn-keep-all {

        word-break: keep-all;

    }

</style>

<body>

    <p class="en-normal" >Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.</p>

    <p class="en-break-all" >Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.</p>

    <p class="en-keep-all" >Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.</p>

    <p class="cn-normal" >首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。</p>

    <p class="cn-break-all;" >首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。</p>

    <p class="cn-keep-all" >首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。</p>

</body>

</html>
normal

浏览器默认的换行规则，当放不下时换行

break-all

允许单词换行

中文情况下，不存在单词，文字的宽度基本一致，在中文中显示效果与normal一致。

keep-all

仅在半角空格或连字符处换行。



标点符号后如无空格，将不会换行

中文中无连字符和空格，默认情况下将离换行边界最近的一个标点符号当做连字符

word-wrap

允许长单词或URL地址换行到下一行，仅限于拉丁文本才其效果。

语法： word-wap: normal | break-word

新文本属性

text-align-last

如何对其文本最后一行。只有在 text-align: justify 才会起作用。

语法： text-align-last: auto | left | right | center | justify | start | end | initial | inherit

https://www.runoob.com/try/playit.php?f=playcss_text-align-last&preval=justify

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style type="text/css">

    p {

        width: 150px;

        height: 200px;

        background: #abcdef;

        font-size: 12px;

        float: left;

        margin-right: 5px;

    }

    span {

        font-weight: bold;

        color: #f00;

        display: block;

        margin-bottom: 5px;

    }

    p:nth-child(1) {

        text-align-last: auto;

    }

    p:nth-child(2) {

        text-align-last: left;

    }

    p:nth-child(3) {

        text-align-last: right;

    }

    p:nth-child(4) {

        text-align-last: center;

    }

    p:nth-child(5) {

        text-align-last: justify;

    }

    p:nth-child(6) {

        text-align-last: start;

    }

    p:nth-child(7) {

        text-align-last: end;

    }

    p:nth-child(8) {

        text-align-last: initial;

    }

    p:nth-child(9) {

        text-align-last: inherit;

    }

</style>

<body>

    <div>

    <p> <span> auto </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

    <p> <span> left </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

    <p> <span> right </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

    <p> <span> center </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

    <p> <span> justify </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

    <p> <span> start </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

    <p> <span> end </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

    <p> <span> initial </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

    <p> <span> inherit </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。<br>大流口水建档立卡手机丢了卡加斯</p>

</div>

</body>

</html>

![](https://img2020.cnblogs.com/blog/1380340/202008/1380340-20200820181309859-1484723470.png)

text-overflow 文本属性溢出

当文本溢出包含元素时发生的事情，仅适用于 over-flow: hidden

语法: text-overflow: clip | ellipsis| string

  • clip 修剪溢出文本
  • ellipsis 修剪溢出文本，以省略号
  • string 修剪溢出文本，以string提醒 仅firefox兼容

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style type="text/css">

    div {

        width: 100px;

        background: #abcdef;

        overflow: hidden;

        font-size: 12px;

        margin: 0 auto;

        margin-bottom: 5px;

        white-space:nowrap;

    }

    div > span {

        font-weight: bold;

        color: #f00;

        margin-bottom: 5px;

        display: block;

    }

    div:nth-child(1) {

        text-overflow: clip;

    }

    div:nth-child(2) {

        text-overflow: ellipsis;

    }

    div:nth-child(3) {

        text-overflow: ">>>";

    }

</style>

<body>

        <div> <span> clip </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。大流口水建档立卡手机丢了卡加斯</div>

        <div> <span> ellipsis </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。大流口水建档立卡手机丢了卡加斯</div>

        <div> <span> ">>>" </span>Taipei 101 is very very very very very high, Taipei 101 is super duper high. Taipei 101 is super duper high; Taipei 101 is super duper high.首先，remove 有两种词性bai，一个是名词，另一个是动du词，而zhiremove可以是及物动dao词和不及物动词。大流口水建档立卡手机丢了卡加斯</div>

</body>

</html>

火狐浏览器

CSS3文本样式的更多相关文章

  1. 前端开发CSS3——文本样式和盒子及样式

    博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome:     http://fontaw ...

  2. CSS3 新增文本样式

    CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...

  3. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  4. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...

  5. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  6. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  7. 6.css文本样式

    文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...

  8. CSS3 文本装饰

    浏览器对CSS3文本特性的支持情况,如下表所示: 浏览器 text-shadow text-overflow word-wrap hyphens Opera 9.5+ 9+.带前缀-o- 10.5+ ...

  9. 第七十八节，CSS3文本效果

    CSS3文本效果 一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera   ...

随机推荐

  1. python函数之闭包函数与无参装饰器

    一.global与nonlocal #global x = 1 def f1(): global x # 声明此处是全部变量x x = 2 print(x) f1() # 调用f1后,修改了全局变量x ...

  2. 一次 outline 去除经验（非继承属性，看着像继承）

    情况描述: 目前维护的老项目是通过 easyui 生成的 html,嵌套结构非常多,当点击元素后,会有个边框???非常影响页面美观,这是啥迷惑点击交互??? 经验告诉我,这是 css 的 outlin ...

  3. epoll poll select区别

    函数依赖 ( Functional Dependency,FD) select:http://www.cnblogs.com/Anker/archive/2013/08/14/3258674.html ...

  4. css详解position五种属性用法及其含义

    position(定位) position - 作为css属性三巨头(position.display.float)之一,它的作用是用来决定元素在文档中的定位方式.其属性值有五种,分别是 - stat ...

  5. 第一个 vue-cli项目

    第一个 vue-cli项目 什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板: 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一 ...

  6. JavaScript 中对象解构时指定默认值

    待解构字段为原始值 正常情况下, const obj = { a: 1, b: 2, }; const { a, b } = obj; console.log(a, b); // 1 2 当被解构字段 ...

  7. 解决Linux无法读写U盘中的NTFS问题

    1 问题描述 由于笔者因为某些需要把Windows装在了U盘上面(在这里建议一下如果有需要请使用固态U盘),在Linux下挂载时,能读取但并不能写. 2 尝试的解决方案 2.1 remount 一开始 ...

  8. 用html自己开发自己的串口TCP通讯调试软件

    今天给大家介绍一个通讯工具,可以自己写html页面,自己写Js脚本实现数据收发. 本程序在不断完善中,请大家不要喷,多多理解,有意见只管提. 系列文章 概述 串口基础功能 TCP客户端收发 参数篇 串 ...

  9. 使用defineProperty实现自定义setter, 简化前端Angular的重构工作

    一.问题场景 Angular的双向绑定给我们开发提供了很大的遍历,将父scope的引用变量作为参数传递给子指令,这样就可以方便的在父作用域内进行业务操作,数据变更会自动传递到子指令.但是如果你基于一个 ...

  10. 02- TCP/IP 协议族

    TCP/IP概述 TCP/IP协议之间的关系 常用的协议 ping命令 tracert命令 常用协议