我想作为一个前端工作者,总会遇到这样的场景,一个表单展示的字段标题有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. ROS_Kinetic_20 ROS基础补充

    ROS_Kinetic_20 ROS基础补充 1 手动创建ROS功能包 参考官网:http://wiki.ros.org/cn/ROS/Tutorials/Creating%20a%20Package ...

  2. Android进阶(二十七)Android原生扰人烦的布局

    Android原生扰人烦的布局 在开发Android应用时,UI布局是一件令人烦恼的事情.下面主要讲解一下Android中的界面布局. 一.线性布局(LinearLayout) 线性布局分为: (1) ...

  3. SWING中文件的上传

    <pre name="code" class="java">import java.io.File; import java.io.FileInpu ...

  4. iOS中 UISearchController 搜索栏 UI技术分享

    <p style="margin-top: 0px; margin-bottom: 0px; font-size: 20px; font-family: 'STHeiti Light' ...

  5. UNIX环境高级编程——计算机体系结构基础知识

    无论是在CPU外部接总线的设备还是在CPU内部接总线的设备都有各自的地址范围,都可以像访问内存一样访问,很多体系结构(比如ARM)采用这种方式操作设备,称为等都会产生异常. 通常操作系统把虚拟地址空间 ...

  6. WIP完工入库及完工退回的几个重要问题

    1.必须向CST_COMP_SNAP_INTERFACE表中插入此工单所有工序的数据(也就是说同样的工单插入多条,只是工序号不一样) 标准文档: Note: If there are multiple ...

  7. go: 一个通用log模块的实现

    在go里面,虽然有log模块,但是该模块提供的功能并不强,譬如就没有我们常用的level log功能,但是自己实现一个log模块也并不困难. 对于log的level,我们定义如下: const ( L ...

  8. Spring Security3 - MVC 整合教程

    下面我们将实现关于Spring Security3的一系列教程.  最终的目标是整合Spring Security + Spring3MVC  完成类似于SpringSide3中mini-web的功能 ...

  9. Chapter 2 User Authentication, Authorization, and Security(4):限制SA帐号的管理权限

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38817915,专题目录:http://blog.csdn.net/dba_huangzj ...

  10. URI记录

    URI:统一资源标识符(Uniform Resource Identifier,或URI)是一个用于标识某一互联网资源名称的字符串.该种标识允许用户对网络中(一般指万维网)的资源通过特定的协议进行交互 ...