CSS:两端对齐原理(text-align:justify)
我是一个小白
我是一个小白
我是一个小白
喷我吧,哈哈
写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥
贴下代码
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
display: inline-block;
width: 300px;
text-align: justify;
}
p:after {
display: inline-block;
content: '';
width: 100%;
}
</style>
</head>
<body>
<p>喷我吧</p>
</body>
我就纳闷为啥要在p标签后面加一个伪元素是为了什么?但是删除伪元素之后发现text-align:justify就不起作用了
问了别人才知道,text-align:justify只适用于多行文字,而最后一行是不起作用的,
如图
所以,如果要让单行两端对齐的话,必须要这行文字不显示在最后一行上,需要在两端的对齐的标签上添加了一个伪元素(块级元素,或者行内块元素,只要有宽度就行),宽度100%令这个伪元素自动换行至最后一行,这样你所需要的"两端对齐"就能显示在字体上了。
除了伪元素,你也能加个行内块元素img input啥的,也能达到效果,但是建议还是用伪元素比较好吧
<p>
喷我吧喷
<img src="" width="100%" height="0"/>
</p>
这么傻的问题,也是问的别人才明白的,别人说这个是奇巧淫技。我查了下奇巧淫技是什么意思,嘎嘎。我问写个文章会不会被封,他说应该不会,只会被别人揍,哈哈
CSS:两端对齐原理(text-align:justify)的更多相关文章
- CSS两端对齐
前面的话 两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...
- css实现左右两端对齐均匀排列 text-align: justify
1.实现一行文字的两端对齐均匀排列 为了实现效果只是加上一个text-align: justify;是没效果的.所以需要加上一个空标签<span><i>都可以,也可以用伪类来写 ...
- 两端对齐布局与text-align:justify
百分比实现 首先最简单的是使用百分比实现,如下一个展示列表: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 实现css两端对齐
如何实现css的两端对齐功能? 最近做项目遇到这种情况,如图所示: input左边框的用户,旧密码,新密码,确认密码无法对齐,样式很丑. 解决办法: 找到对应的类名,加上:text-align:jus ...
- css两端对齐——div+css布局实现2端对齐的4种方法总结
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...
- css 两端对齐的多种实现方式
http://www.cnblogs.com/PeunZhang/p/3289493.html
- CSS实现两端对齐效果
CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...
- CSS3 justify 文本两端对齐
浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...
- 【小技巧】css文字两端对齐
一.文字两端对齐方法: text-align-last: justify; 二.举个丽子: 三.效果如下: 四.注意: 要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.
随机推荐
- mysql命令flush privileges命令
修改一个用户的密码,命令如下 mysql> update user set password=password('新密码') where user='用户名'; 执行后报错: ERROR 105 ...
- Laravel-手机短信验证码-阿里云
1.composer require alibabacloud/client2.App\Service\AliyunSms.php <?php namespace App\Service; us ...
- HTML 基础及超链接练习
实验一:HTML 基础及超链接练习 实验目的: 熟悉 HTML 基础及超链接的使用 实验要求: 1.建立至少 3 个以上的网页: 2.实现任意两网页之间的跳转(建议做个导航菜单): 3.每个网页里面至 ...
- vue监听页面中的某个div的滚动事件,并判断滚动的位置
在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...
- CPU是海王?聊聊 主/子线程 和 同/异步 的关系
最近表弟一直在找实习,经常会问我一些问题,有些问题在没有经历过真实工作时是真的不好理解的,所以我开了这个[表弟专栏],专门为找工作的表弟解决一些疑惑. 这篇文章从计算机发展的角度出发,描述为什么计算机 ...
- 电子检索实体书「GitHub 热点速览 v.22.12」
不知道有没有小伙伴遇到实体书快速定位指定内容的问题,凭借着记忆里很难快速翻阅到正确的页数,但 paperless-ngx 也许能帮上你的忙,它除了能将你的实体书籍电子化变成文件库里的一员之外,还能帮你 ...
- Django 之 modelForm (edit.html页面的编写)
models.py文件 from django.db import models # Create your models here. from django.db import models # C ...
- vue学习过程总结(03) - 菜鸟教程归纳
1.模板语法 1.1.文本插值,数据绑定.{{}},如: <p>{{ message }}</p> 1.2.输出HTML代码.v-html,如: <div v-html= ...
- SQL注入手册
英文版:链接: https://sqlwiki.netspi.com/ 中文版:链接: https://pan.baidu.com/s/1WWmjvYYnLC6_nItMVvUVig 密码: e98r ...
- 托管调试助手 "DisconnectedContext":“针对此 RuntimeCallableWrapper 向 COM 上下文 0xd47808 的转换失败,错误如下: 系统调用失败。
参考资料 托管调试助手 "DisconnectedContext":"针对此 RuntimeCallableWrapper 向 COM 上下文 0xd47808 的转换失 ...