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 ...
随机推荐
- 数据表设计之主键自增、UUID或联合主键
最近在做数据库设计的时候(以MySQL为主),遇到不少困惑,因为之前做数据库表设计,基本上主键都是使用自增的形式,最近因为这种做法,被领导指出存在一些不足,于是我想搞明白哪里不足. 一.MySQL为什 ...
- SpringCloud+Nacos实现服务配置中心（Hoxton版本）
关于 Nacos Spring Cloud 的详细文档请参看:Nacos Config和Nacos Discovery. 通过 Nacos Server 和 spring-cloud-starter- ...
- Re:从零开始的Git保姆级使用教程
观前提示: 本文主要介绍了用命令的方式对Git进行操作(全程用的win10系统),而对于TortoiseGit和github desktop等图形化操作知识,只进行简单介绍或提及,详细使用会在提到的地 ...
- 201871030102-崔红梅 实验二 个人项目—— D{0-1}KP 项目报告
项目 内容 课程班级博客链接 班级博客 这个作业要求链接 实验二作业链接 我的课程学习目标 1.熟练掌握将本地代码保存至GitHub中2.掌握折扣背包问题3.回顾动态规划算法和回溯算法4.对java语 ...
- 201871010203-陈鹏昱 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
项目 内容 课程班级博客链接 班级博客 这个作业要求链接 作业要求 我的课程学习目标 学习软件工程的理论和知识,掌握软件开发流程,增强实践能力 这个作业在哪些方面帮助我实现学习目标 体验软件项目开发中 ...
- 面试官问PHP四大主流框架的优缺点，看这篇就够了！
本篇文章我们来讲讲PHP四大框架的优缺点都有哪些,让你们在开发中更好的去选择使用哪款PHP框架去完成项目,废话不多说,我们一起来看看吧!! ThinkPHP ThinkPHP(FCS)是一个轻量级的中 ...
- java面试一日一题：讲对mysql的MVCC的理解
问题:请讲下对mysql中MVCC的理解 分析:这个问题要回答的是对MVCC的理解,以及MVCC解决了什么问题这几个方面入手. 回答要点: 主要从以下几点去考虑, 1.什么是MVCC? 2.MVCC用 ...
- idea无法引入自己定义的包和类
方法一:通过清理缓存解决: File -> Invalidate Caches / Restart...,在新窗口点击Invalidte and Restart,未奏效 方法二:导入依赖 如图, ...
- 安全开发Java：日志注入，并没那么简单
摘要:当web工程比较大,历史代码较多时, 应当使用log4j2框架的能力来修改日志注入问题,而不是按照有些博文里写的逐个进化参数的方式. 案例故事 某个新系统上线了,小A在其中开发了个简单的登录模块 ...
- 嗨，你知道吗，Spring还有这些高级特性！
目录 Spring介绍 设计理念 核心组件的协同工作 设计模式的应用 代理模式 策略模式 特性应用 事件驱动编程 异步执行 定时任务 日常开发使用非常多的Spring,它的设计理念是什么呢?有哪些核心 ...