我想作为一个前端工作者,总会遇到这样的场景,一个表单展示的字段标题有4个字也有2个字的时候,这样子同时存在想展示的美观一点,就需要字体两端对齐了,其实实现方式很简单,我针对其中一种来做下介绍,以后方法在补上更新。

html  :

 <p class="cell-label-text"></p>

css  :

.cell-label-text{

  width:2rem;

text-aligh:justify;

overflow:hidden;

 }

.cell-label-text:after{

  display:inline-block;

content:"";

    width:2rem;

text-aligh:justify;

overflow:hidden;

}

css 字体两端对齐的更多相关文章

  1. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  2. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  3. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  4. CSS实现两端对齐效果

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

  5. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  6. CSS图片两端对齐,自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

  7. css 文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  8. css实现两端对齐~

    今天做表单时遇到让上下两个字段对齐的情况,手机号码.用户名. 然后今天在网上找了找相关方法,发现确实是没有什么好的方法解决,特别是当需要兼容的时候.找到了两个我觉得相对还不错的方法: 方法一.是在司徒 ...

  9. 可用的CSS文字两端对齐

    最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideogra ...

随机推荐

  1. 关于大数据时代传统商业存储的思考: 中心存储 VS 分布式存储

    尊重原创,转载请注明出处:http://anzhan.me ; http://blog.csdn.net/anzhsoft 今天和我们部门的老大1*1, 大家面对面沟通了一下到新的项目组的想法.而且也 ...

  2. 【嵌入式开发】 嵌入式开发工具简介 (裸板调试示例 | 交叉工具链 | Makefile | 链接器脚本 | eclipse JLink 调试环境)

    作者 : 韩曙亮 博客地址 : http://blog.csdn.net/shulianghan/article/details/42239705  参考博客 : [嵌入式开发]嵌入式 开发环境 (远 ...

  3. centos7安装jdk,tomcat,msyql(MariaDB)

    操作系统版本 CentOS Linux release 7.2.1511 (Core) 安装jdk 下载jdk-8u66-linux-x64.rpm上传到linux上 先改用户权限 然后 rpm -i ...

  4. cocos2d-js(二)cocos2d-js的基本语法与类的简介

    基本语法: 1.类的定义 一般类都是集成Scene或者Layer: var myLayer = cc.Layer.extend({类的内容}); 2类内的成员变量与方法: 2.1成员变量的声明: 变量 ...

  5. linux的date的几个例子

    shell脚本为test.sh: input=$1 echo "sdfa:${input}" echo ${input} echo "dfadf"${input ...

  6. /sbin/insserv: No such file or directory

    /sbin/insserv: No such file or directory在Ubuntu下安装service服务,可能会报如下错误:/sbin/insserv: No such file or ...

  7. javascript之DOM编程实现城市的联动框

    需求;用一张图片表示. 分析: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  8. Linux的mount命令简介

    在Linux系统中,如果要使用硬盘.光盘.软盘或MO盘等存储设备,必须先进行挂装(Mount).当存储设备挂装完成之后,就可以将其作为一个目录来进行访问了.挂装设备需要使用mount命令.执行这一命令 ...

  9. markdown简易快速的编辑格式(易读易写)

    实现简单快速书写,格式指定简便.易读易写 讲解http://wowubuntu.com/markdown/ 简单使用的讲解:http://www.ituring.com.cn/article/23 代 ...

  10. 神奇的layout_weight属性

    1.概述 在线性布局有时候为了控制一下屏幕的适配,可以使用layout_weight这个属性来设置权重,要注意一点,这个属性只有在Linearlayout中才有效,这个属性往往会随着android:l ...