使用text-align:justify实现两端对齐一例

text-align:justify只能对多行中的非最后一行进行两端对齐。对于单行自己没办法，IE有text-justify 可以解决问题，对了非IE的我的方式比较垃圾，因为只在特殊场合下才会用。

Example Source Code [www.52css.com]
.justify{
height:1.1em;
overflow:hidden;
text-align:justify;
text-justify :distribute-all-lines;
}
div.cn:after {
content: "__________________________________________";
font-size:100px;
} 
　　对了非IE的我是使用content还增加内容达到有第二行，才会在第一行两端对齐。

　　不过各浏览器对中文的理解不一样。Firefox 是直接分割中文，Opera不会分割中文，只认空格，要是在中文中间插点半角的英文或者标号它还会对不齐，safari接近Opera。都是不加空格没法分。

　　英文比较好，因为大家只能用空格分来单词，不过IE用text-justify :distribute-all-lines来分真是难看得要命。本来想过用htc或者js帮IE，可是发现,IE6好笨的说，家里没IE7不知道怎样。

　　或者敲空格是一种比较好的方式，可firefox这种只放大文本的浏览器一放大文字就XX了，我写的那个烂方法也只有在一定的情况下有用，想起一句话：珍惜生命，远离Firefix!

赞 (0)

相关推荐

  • JS实现控制表格行文本对齐的方法

    本文实例讲述了JS实现控制表格行文本对齐的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以控制表格内的整行文本向左或者向右对齐 <!DOCTYPE html> <html> <head> <script> function leftAlign() { document.getElementById('header').align="left"; } </script> </head> <body&g

  • text-align:justify实现文本两端对齐 兼容IE

    text-align:justify实现文本两端对齐 兼容IE

    对于text-align 我们再熟悉不过了,可是它有个justify属性,平时很少用到,就鲜为人知了.justify是一种文本靠两边布局方式,一般应用于书刊杂志排版:合理运用text-align:justify 有时会省去很多开发的时间. 要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE 下的显示错误,就是源于 haslayout. 什么是 haslayout ? haslayout 是Windows Internet

  • 使用text-align:justify实现两端对齐一例

    text-align:justify只能对多行中的非最后一行进行两端对齐.对于单行自己没办法,IE有text-justify 可以解决问题,对了非IE的我的方式比较垃圾,因为只在特殊场合下才会用. Example Source Code [www.52css.com] .justify{ height:1.1em; overflow:hidden; text-align:justify; text-justify :distribute-all-lines; } div.cn:after { c

  • vant中field组件label属性两端对齐问题及解决

    vant中field组件label属性两端对齐问题及解决

    目录 field组件label属性两端对齐问题 先看看原来的四种效果 label左对齐 看看官方文档 另一种解决思路 vant输入框label两端对齐 field组件label属性两端对齐问题 最近在开发一个移动端的Web应用,使用vant构建移动端的页面,在构建表单时,使用Field组件作为信息输入和展示,但是但是由于对于label属性只提供了left.center.right的对齐方式,个人觉得不是很美观,希望能够显示两端对齐的效果. 先看看原来的四种效果 label左对齐 label居中对

  • Android实现TextView两端对齐的方法

    Android实现TextView两端对齐的方法

    Android中的TextView控件默认是做不到两端对齐的,都是左对齐.可能的原因是安卓默认数字.字母不能为第一行以后每行的开头字符,因为数字.字母为半角字符,还有就是文字中的英文字符占用1个字节,而一个汉字占用两个字节.下面我就介绍下实现两端对齐的原理: 1.测量一个中文汉字所占用的宽度 2.根据TextView的宽度和一个汉字所占用的宽度以及字符之间的间隔计算出总行数. 3.根据padding和margin以及行高计算出TextView的总高度. 4.绘制每一行的每一个字符 效果如下: 具

  • Android TextView两端对齐解决办法

    Android TextView两端对齐解决办法

    Android TextView两端对齐解决办法 今天遇到一个关于TextView文字两端对齐其实方案,大家都知道原生控件是不能满足我们的需求的,因此需要自定义View 下面看下效果图 package com.example.VerticalMarqueeTextView.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import andro

  • Android 中的两端对齐实例详解

    在android中的webview中,可以对文本内容进行对齐,具体方法如下 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); String htmlText = " %s "

  • vue-quill-editor富文本编辑器超详细入门使用步骤

    vue-quill-editor富文本编辑器超详细入门使用步骤

    目录 首先放上效果图 1.安装 2.引入到项目中 3.在页面上写组件 4.配置option 5.给工具栏鼠标悬停加上中文释义 6.上传图片到七牛云 7.自定义控制图片大小 参考文章: 总结 首先放上效果图 1.安装 npm install vue-quill-editor -S 2.引入到项目中 有两种挂载方式: 全局挂载 和 在组件中挂载,根据自己的项目需求选择,一般用到富文本编辑都是在某一个项目中,这里只写在项目中挂载的方式 import { quillEditor } from 'vue-

  • python使用docx模块读写docx文件的方法与docx模块常用方法详解

    一,docx模块 Python可以利用python-docx模块处理word文档,处理方式是面向对象的.也就是说python-docx模块会把word文档,文档中的段落.文本.字体等都看做对象,对对象进行处理就是对word文档的内容处理. 二,相关概念 如果需要读取word文档中的文字(一般来说,程序也只需要认识word文档中的文字信息),需要先了解python-docx模块的几个概念. 1,Document对象,表示一个word文档. 2,Paragraph对象,表示word文档中的一个段落

  • Python操作word文档的示例详解

    Python操作word文档的示例详解

    目录 写在前面 创建一个文档 先实现第一步,写入一个标题 添加文字段落 列表的添加 图片的添加 表格添加 相关样式设置 页眉和页脚 写在前面 python-docx 不支持 doc 文档,一定要注意该点,如果使用 doc 文档,需要提前将其用 Word 相关软件转换为 docx 格式. doc 和 docx 是存在本质差异的,一个是二进制,另一个 XML 格式的文件. 模块的安装 pip install python-docx . 以下网址首先准备好 官方手册:https://python-do

  • Vue element商品列表的增删改功能实现

    Vue element商品列表的增删改功能实现

    目录 介绍 基本信息 上传主图 商品信息vue富文本编辑器的配置 最后提交数据 介绍 整体和用户列表 类似 功能步骤有: 面包屑导航 外部是大的卡片组件 搜索商品 添加商品 表格渲染数据 作用域插槽用于 操作按钮 分页器组件的使用 不一样的点:之前编辑信息 新增信息是 弹出对话框编辑 但商品信息内容较多 我们跳转到一个组件.并且进行商品编辑的时候要进行路由传参 来渲染初始数据 点击添加商品按钮时跳转到新增商品组件对应路径: addGoods(){ this.$router.push('/good

随机推荐