我想作为一个前端工作者,总会遇到这样的场景,一个表单展示的字段标题有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. 15个易遗忘的java知识点

    1.java中的基本数据类型以及所占内存大小 (1)整形  byte 1字节  short 2字节  int 4字节  long 8字节  (2)浮点型  float 4字节  double 8字节  ...

  2. Android学习之Animation(二)

    接着上次的View Animation动画,这次是Frame Animation.具体点来讲就是在Frame层面上进行变化的动画效果的设置.说白了就是定时更换"背景"图.来实现不同 ...

  3. PageContext ServletContext ServletConfig辨析

    上面三个东西都是什么关系呀? 先看图 注意几点 1 GenericServlet有两个init方法# 2 GenericServlet既实现了ServletConfig方法,它自己由依赖一个Servl ...

  4. 详解EBS接口开发之物料导入API

    create_item inv_item_grp.create_item(p_commit => fnd_api.g_true, -- p_item_rec => l_item_rec, ...

  5. Google地球查看香港地形

    12月1号要去香港.为此需要先了解一下香港的情况.以前只知道用Google地球看别人照的照片(或者是全景照),这次无意间发现了它一个很强大的功能:立体的呈现一个地区的地形.对于像香港这样的多山地区来说 ...

  6. 循环链表设计与API实现

    基本概念 循环链表的定义:将单链表中最后一个数据元素的next指针指向第一个元素 循环链表拥有单链表的所有操作 创建链表 销毁链表 获取链表长度 清空链表 获取第pos个元素操作 插入元素到位置pos ...

  7. 理解WebKit和Chromium: Chromium的多进程资源加载机制

    转载请注明原文地址:http://blog.csdn.net/milado_nju ##概述 前面介绍了WebKit中的资源加载机制,其实它只是一个框架性的东西,实际的资源加载依赖于各个WebKit移 ...

  8. JS跨域请求

    前提:两个项目,第一个项目想请求第二个项目不通过服务器代码只通过页面请求. 1. 第一个项目html(需要第二个项目配合实现) 1 2 3 4 5 6 7 <script> functio ...

  9. ExtJS:文件上传实例

    ExtJS:文件上传实例 var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = ...

  10. Android Data Binding高级用法-Observable、动态生成Binding Class(三)

    设置View的id 虽然说Data Binding这种分层模式使得我们对数据的传递简单明了,一般情况下我们可以不设置View的id,不使用findViewById即可对View进行数据上一系列的操作, ...