我是一个小白
我是一个小白
我是一个小白
喷我吧,哈哈

写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端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)的更多相关文章

  1. CSS两端对齐

    前面的话   两端对齐在导航条Tab的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex   弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端 ...

  2. css实现左右两端对齐均匀排列 text-align: justify

    1.实现一行文字的两端对齐均匀排列 为了实现效果只是加上一个text-align: justify;是没效果的.所以需要加上一个空标签<span><i>都可以,也可以用伪类来写 ...

  3. 两端对齐布局与text-align:justify

    百分比实现 首先最简单的是使用百分比实现,如下一个展示列表: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  4. 实现css两端对齐

    如何实现css的两端对齐功能? 最近做项目遇到这种情况,如图所示: input左边框的用户,旧密码,新密码,确认密码无法对齐,样式很丑. 解决办法: 找到对应的类名,加上:text-align:jus ...

  5. css两端对齐——div+css布局实现2端对齐的4种方法总结

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...

  6. css 两端对齐的多种实现方式

    http://www.cnblogs.com/PeunZhang/p/3289493.html

  7. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  8. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  9. 【小技巧】css文字两端对齐

    一.文字两端对齐方法:  text-align-last: justify; 二.举个丽子:  三.效果如下:  四.注意:  要使文字在容器中两端对齐,该容器需要是一个块级元素,要有自己的宽度.

随机推荐

  1. 详解pandas的read_csv方法

    楔子 使用pandas做数据处理的第一步就是读取数据,数据源可以来自于各种地方,csv文件便是其中之一.而读取csv文件,pandas也提供了非常强力的支持,参数有四五十个.这些参数中,有的很容易被忽 ...

  2. 第五篇- 抖音的强大对手来了，用Flutter手撸一个抖音国际版，看看有多炫

    前言 由于中间几个月项目天天加班,导致没没时间更新,最近一段时间对前端进行了重构,加了很多页面,如登录.注册.关注.个人中心等,目前写这个纯属业余个人爱好,所以断断续续的继续在做...... 前端地址 ...

  3. （六）React Ant Design Pro + .Net5 WebApi：后端环境搭建-EF Core

    一. 简介 EFCore 是轻量化.可扩展.开源和跨平台版的常用数据访问技术,走你(官方文档) 二. 使用 1.安装数据库驱动包.PMC 工具包 不同的数据库有不同的包,参考,我用 PostgreSQ ...

  4. ubuntu 16.04和18.04 忘记登录密码的解决办法

    1:开机按Shift键,出现如下界面.(手速要快,Shift键要按时间久一点)选择第二项 2:按回车键进入如下界面,然后选中有recovery mode的选项(第三项) 3:按e进入如下界面,并找到图 ...

  5. python安装jupyter notebooks（windows下）

    [1]前提 前提:下载好Python并把python添加到了Path路径 以3.8为例子,在安装的时候有个这个勾选项,Add Python 3.8 to PATH,勾上就好,没有的话.就把python ...

  6. Mock平台3-初识Antd React 开箱即用中台前端框架

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 内容提要 首先说下为啥这次测试开发系列教程前端选择Antd React,其实也是纠结对比过最终决定挑战一把,想法大概有几下几点: 笔者自己 ...

  7. OpenTracing 简介

    自从 Google Dapper 的论文发布之后,各大互联网公司和开源社区开发的分布式链路追踪产品百花齐放,同时也给使用者带来了一个问题,各个分布式链路追踪产品的 API 并不兼容,如果用户在各个产品 ...

  8. Ubuntu 11.04 LAMP+JSP环境安装过程

    安装LAMP命令:sudo apt-get install apache2 php5 libapache2-mod-php5 mysql-server libapache2-mod-auth-mysq ...

  9. 微服务8：通信之RPC实践篇（附源码）

    ★微服务系列 微服务1:微服务及其演进史 微服务2:微服务全景架构 微服务3:微服务拆分策略 微服务4:服务注册与发现 微服务5:服务注册与发现(实践篇) 微服务6:通信之网关 微服务7:通信之RPC ...

  10. python发送邮件之宝藏库yagmail

    之前使用email模块+smtplib模块发送邮件,虽然可以实现功能,但过程比较繁琐,今天发现一个宝藏库(yagmail),可以说是炒鸡好用啦!!! 贴上实现代码,大家细品 yagmail安装 pip ...