css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观，这是毫无疑问的，其次css可以通过以下属性改变文字的排版，比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距，direction改变文本从左至右的阅读顺序，white-space处理字符间空白text-transform实现文字大小写text-align改变文字排版对齐，至于我们常看到的产品介绍中的省略号“...”如何实现以及文字如何贴图对齐，尽在下面代码详情中一一介绍。
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>css常用样式对文本的处理演练</title>7 <style type="text/css">8 div#box{9 letter-spacing: 2px;/*字符间距*/
10 text-indent: 2em;/*首行缩进2字符*/
11 width: 300px;/*容器宽度*/
12 height: 200px;/*容器高度*/
13 color: #000;/*文本颜色*/
14 background-color:rgb(255,0,0);/*容器背景色*/
15 }
16 p{
17 word-spacing: 5px;/*文字间距*/
18 direction: rtl;/*文本方向*//*默认文本方向从左至右ltr，left to right*/
19 white-space:normal;/*处理空白符*/
20 /*通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理： 21 它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：*/
22 }
23 /*文本修饰*/
24 p.text{
25 text-decoration: underline;
26 text-decoration: overline;
27 text-decoration: none;
28 text-transform: uppercase;/*全部大写*/
29 text-transform: lowercase;/*全部小写*/
30 text-transform: capitalize;/*首字母大写*/
31 }
32 /*文本对齐方式*/
33 div{
34 text-align: left; /*文本居左*/
35 text-align: right; /*文本居左*/
36 text-align: center; /*文本居中*/
37 text-align: justify;/*两端对齐*/
38 }
39 /* 问题：我们通常看到的类似这样的http://www.mi.com/seckill 商品介绍中的省略号...如何实现？ */
40 div#box{
41 width: 400px;
42 height: 50px;
43 white-space: nowrap;/*文本不换行*/
44 overflow: hidden;/*文本穿出隐藏*/
45 text-overflow: ellipsis;/*省略号*/
46 line-height: 50px;/*文本垂直对齐*/
47 }
48 /* 问题：当插入图片，如何让文本与图片顶对齐围绕 */
49 img{
50 width: 200px;
51 float: left;
52 vertical-align: bottom;/*文本垂直 middle top bottom */
53 }
54 div>p{
55 float: left;/*文本贴图对齐*/
56 }
57 </style>
58 </head>
59 <body>
60 <div id="box">撩人情话：1.我并非言辞夸张或虚情假意。我觉得，这个世界已经待我极好。从前我也不曾这么认为。直到，我在芸芸众生之中遇见你。遇见一道光，让我此生再无遗憾，再不畏惧。2.我是个固执的人，从不愿挪动原则半分， 61 可你来了之后，我的原则就成了你。3.喜欢一个人是藏不住的，即使嘴巴不说，也会从眼睛里跑出来。我喜欢你，认真且怂，从一而终。</div>
62 <p class="text">I'm a stubborn person. I never want to move half of the principles, but after you come, my principles become you.</p>
63 <div class="pic">
64 <img src="https://i-beta.cnblogs.com/assets/adminlogo.gif" alt="">我是个固执的人，从不愿挪动原则半分，可你来了之后，我的原则就成了你。 65 </div>
66 </body>
67 </html>display:block; /内联对象需加/
word-break:keep-all; /不换行/
white-space:nowrap; /不换行/
overflow:hidden; /内容超出宽度时隐藏超出部分的内容/
text-overflow:ellipsis; /溢出时显示省略标记...；需与overflow:hidden;一起使用/
对于表格，定义有点不一样：
table{ width:30em; table-layout:fixed; /只有定义了表格的布局算法为fixed，下面td的定义才能起作用/ }
td{ width:100%; word-break:keep-all; /不换行/ }
white-space:nowrap; /不换行/ overflow:hidden; /内容超出宽度时隐藏超出部分的内容/ text-overflow:ellipsis; /溢出时显示省略标记...；需与overflow:hidden;一起使用/
从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】都有整理，在线解析，学习指导，点：【WEB前端学习圈⑤】
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练相关推荐
- css 高度塌陷_web前端入门到实战：CSS 负边距的行为表现
CSS 中的负边距 margin 是可以设置为负值的,这会帮你实现靠近顶部/左边相邻元素的效果,或者实现靠近底部/右边相邻元素的效果. 先介绍下我们的测试元素:一个简单的包含三个段落的容器元素.注意, ...
- css hover变成手_web前端入门到实战：彻底掌握css动画「transition」
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...
- 双飞翼布局内容不换行_web前端入门到实战：圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...
- html设置样式不继承_web前端入门到实战：css的核心原理分为优先级原则与继承原则两大部分...
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...
- css 百分比 怎么固定正方形_web前端入门到实战：一次搞懂CSS字体单位：px、em、rem和%
对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...
- rem 前端字体_web前端入门到实战：一次搞懂CSS字体单位：px、em、rem和%
对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...
- after不显示_web前端入门到实战：css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...
- webapp入门到实战_web前端入门到实战：前端高手在CSS 开发效率的必备片段
这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找 清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们 ...
- 前端悬浮窗效果_web前端入门到实战：css过渡和动画解析文
一.transition 过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现,从一种状态过渡到另一种状态. 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一.在默认样式中声明元素的初始 ...
最新文章
- Python正则表达式：match(),search(),findall()与finditer()的用法
- 读书笔记4数据的读入和保存
- 思维的禁锢 大脑的绳锁
- 28.特性trait.rs
- Storm，Trident，Spark Streaming，Samza和Flink主流流处理框架比较
- 深度学习导论（5）手写数字识别问题步骤
- linux内核中分配4M以上大内存的方法
- 计算机网络二级考试类型,二级计算机考试大纲
- c语言 数组指针传递给函数_嵌入式开发-C语言-指针与数组
- 1011. World Cup Betting (20)——PAT (Advanced Level) Practise
- IT英语4-计算机英语缩写术语
- logback springBoot 配置日志
- [GDC 2015] Scroll Back - 2D 卷轴游戏的摄影机理论与实务
- 8法则的挑战：长尾理论与长尾效应
- 2022 数维杯 A 题银行效率评价与破产成因分析
- bootstrap树节点如何设置默认不展开_GraPhlAn：最美进化树或层级分类树学习笔记
- 小程序刷新重置当前页面
- 我们是一个团结、有力、强大的团队
- 音频隐写术总结篇（附隐写软件下载链接）
- 孙鑫VC++学习笔记（转载至程序员之家--虎非龙）[11--15] .