最近在项目中,使用了一个新的样式属性:text-align:justigy,这个属性在使用过程中遇到了一些小异常,现在总结下。

 text-align有一个属性值为justify,为对齐之意。其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行)。在移动端的时候,文本显示就比较的重要。我们比较下默认样式:left和justify样式:

同一个文本显示样式如下:

下面截图是文本中一段英文左对齐的右边缘截图:我们发现参差不齐。

使用justify后,文本显示如下:

右侧完全对齐了,也就是整篇文字全部沿着左边缘和右边缘对齐显示了。

但是有时候会出现如下的情况——有时候就会出现文字非常稀松的情况:

代码格式如下:

 p {text-align: justify;text-indent: 2em;width: 100%;}
img {width: 100%;margin-bottom: 10px;}

html格式如下:

  <p>
CSS2中text-align有一个属性值为justify,为对齐之意。其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行)。如果您现在浏览器的地址是以http://www.zhangxinxu.com打头的话,就可以发现我的每篇文章都是以两端对齐的方式显示的,所以,有时候就会出现文字非常稀松的情况,如下图所示。
<img src="http://pic.qiantucdn.com/58pic/11/31/58/97p58PICV26.jpg" alt="2">
<img src="http://img1.3lian.com/2015/a1/84/d/102.jpg" alt="3">
</p>

我们知道:text-align其诞生的意义是控制文字的对齐与显示的,从其属性名上就可以看出来。

从其渲染与解析上来看,其主要是用来控制inline水平元素或inline-block元素的对齐与显示的,例

如嵌套行内标签的文字、图片、input表单控件等;而对block水平的元素是没有作用的。

对于上面存在的问题,有两种方式可以解决:

1,将img标签从p标签内单独移动出来显示;

2.  将img标签display:block化;

img {width: 100%;margin-bottom: 10px;display: block;}

如果img换成input标签的化,效果也是同样的。所以需要注意下。

text-align:justify在项目中碰到的问题的更多相关文章

  1. 项目中碰到的ExceptionInInitializerError异常

    背景 之前在集成第三方即时通信系统-融云的时候,我直接clone它的服务端源码,然后导入我的项目,我在测试它连接融云服务器案例时,发现一直不成功,始终报一个 ExceptionInInitialize ...

  2. Vue项目三、项目中碰到的问题详解

    一.组件的划分创建 方法一: 把页面上需要复用的模块,拆分成组件.比如,页面的header.footer.面包屑.弹出框等拆分成组件.所以在src中应该有一个文件夹(components)专门放这些会 ...

  3. 解决tomcat部署项目中碰到的几个问题

    在tomcat上部署项目并进行测试,经常会碰到各种问题.在不同的操作系统上部署,对问题的解决也会有一些差异. 1 发现问题 1.1 项目部署 先将项目达成war包,放到tomcat的webapps目录 ...

  4. Extjs 在项目中碰到问题

    1.切换tabpanel,新建tab关闭后再新建报错,在火狐下报错 TypeError: el is null   el.addCls.apply(el, arguments); 这个我在下一篇文章中 ...

  5. 【C++模版之旅】项目中一次活用C++模板(traits)的经历

    曾经曾在一个项目中碰到过一个挺简单的问题,但一时又不能用普通常规的方法去非常好的解决,最后通过C++模板的活用,通过traits相对照较巧妙的攻克了这个问题.本文主要想重现问题发生,若干解决方式的比較 ...

  6. JavaWeb项目中获取对Oracle操作时抛出的异常错误码

    最近在项目中碰到了这么一个需求,一个JavaWeb项目,数据库用的是Oracle.业务上有一个对一张表的操作功能,当时设置了两个字段联合的唯一约束.由于前断没有对重复字段的校验,需要在插入时如果碰到唯 ...

  7. 我是如何在公司项目中使用ESLint来提升代码质量的

    ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的 ...

  8. C++\CLI语法 在项目中的使用

    通常情况下,对一个标准的com组件进行集成,网上普遍使用的方式有: 1.#import *.dll 或 #import *.ocx的方式,VS编译器重新编译后,就会自动生成组件对应的*.tlh文件,该 ...

  9. Nginx 使用自签名证书实现 https 反代 Spring Boot 中碰到的页面跳转问题

    问题一:页面自动跳转到 80 端口 问题描述 最近在使用Nginx反代一个Spring Boot项目中碰到了一个问题,使用 Spring Boot 中的 redirect: 进行页面跳转的时候,通过 ...

随机推荐

  1. layui 表格点击图片放大

    表格 ,cols: [[ //表头 {checkbox: true,fixed: true} ,{type: 'numbers', title: 'ID', sort: true,width:80} ...

  2. __autoreleasing 修饰符

    将对象赋值给附有__autoreleasing 修饰符的变量等同于ARC 无效时调用对象的autorelease方法.我们通过以下源代码来看一下. @autoreleasepool { id __au ...

  3. Joining Byte Blocks(哈希+带花树)

    题目链接 Problem Statement As you are probably aware, the Internet protocols specify a canonical byte or ...

  4. Java虚拟机原理图解-- 1.2、class文件中的常量池

    了解JVM虚拟机原理 是每一个Java程序员修炼的必经之路.但是由于JVM虚拟机中有很多的东西讲述的比较宽泛,在当前接触到的关于JVM虚拟机原理的教程或者博客中,绝大部分都是充斥的文字性的描述,很难给 ...

  5. PAT甲级——A1051 Pop Sequence

    Given a stack which can keep M numbers at most. Push N numbers in the order of 1, 2, 3, ..., N and p ...

  6. PAT甲级——A1014 Waiting in Line

    Suppose a bank has N windows open for service. There is a yellow line in front of the windows which ...

  7. iOS多线程方案总结及使用详解

    本篇文章整理了几种iOS中主要的多线程方案,提供了Swift和Objective-C两种语言的写法. 概述 iOS目前有四种多线程解决方案: NSThread GCD NSOperation Pthr ...

  8. 冒泡排序算法[C++]

    冒泡排序应该是最容易实现的一种排序算法了.其基本思想是:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数,将小 ...

  9. HDFS 名称节点的启动

  10. Luogu P3960 列队(动态开点线段树)

    P3960 列队 题意 题目描述 Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia所在的方阵中有\(n \times m ...