CSS3文本样式
文本阴影 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>
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文本样式的更多相关文章
- 前端开发CSS3——文本样式和盒子及样式
博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome: http://fontaw ...
- CSS3 新增文本样式
CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- 第 21 章 CSS3 文本效果
学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...
- HTML 学习笔记 CSS3 (文本效果)
text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...
- 6.css文本样式
文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...
- CSS3 文本装饰
浏览器对CSS3文本特性的支持情况,如下表所示: 浏览器 text-shadow text-overflow word-wrap hyphens Opera 9.5+ 9+.带前缀-o- 10.5+ ...
- 第七十八节，CSS3文本效果
CSS3文本效果 一．文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow Opera ...
随机推荐
- 使用python的虚拟环境virtualenv
技术背景 在前面几篇博客中我们介绍了容器的使用(博客1.博客2.博客3.博客4.博客5),容器是一种系统级的隔离方案,更多的强调资源上的隔离.而这里我们要介绍的python的虚拟环境,更加强调的是依赖 ...
- vue 快速入门 系列
vue 快速入门(未完结,持续更新中...) 前言 为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 ...
- [枚举]P1085 不高兴的津津
不高兴的津津 题目描述 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她报名的各科复习班.另外每周妈妈还会送她去学习朗诵.舞蹈和钢琴.但是津津如果一天上课超过八个小时 ...
- Chrome最新0day RCE（2021/4/13）
关于Chrome Chrome就是Google浏览器... POC Git链接 https://github.com/r4j0x00/exploits/tree/master/chrome-0day ...
- MySQL提升笔记（1）：MySQL逻辑架构
深入学习MySQL,从概览MySQL逻辑架构开始. 首先来看一下MySQL的逻辑架构图: MySQL逻辑架构大概可以分为三层: 客户端:最上层的服务并不是MySQL所独有的,大多数基于网络的客户端/服 ...
- Spring Boot 2.3.0 新特性Redis 拓扑动态感应
本文为原创文章.欢迎任何形式的转载,但请务必注明出处 冷冷https://lltx.github.io. Spring Boot 2.3 新特性优雅停机详解 Spring Boot 2.3 新特性分层 ...
- Windows搭建Linux子系统（WSL）详细教程
介绍 WSL(windows下的Linux子系统) Windows Subsystem for Linux(简称WSL)是一个在Windows 10上能够运行原生Linux二进制可执行文件(ELF格式 ...
- Django 视图（View）
1. 视图简介 2. URLconf 1)关联各应用下的 URLconf 2)URLconf 的编写 3)namespace 反向解析 3. 视图函数&错误视图 4. HttpRequest ...
- 用html自己开发自己的串口TCP通讯调试软件
今天给大家介绍一个通讯工具,可以自己写html页面,自己写Js脚本实现数据收发. 本程序在不断完善中,请大家不要喷,多多理解,有意见只管提. 系列文章 概述 串口基础功能 TCP客户端收发 参数篇 串 ...
- Python中的Pandas模块
目录 Pandas Series 序列的创建 序列的读取 DataFrame DataFrame的创建 DataFrame数据的读取 Panel Panel的创建 Pandas Pandas ( Py ...