html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
css实现文字两端对齐一直以来都是一个令人头痛的事情，我也是经常遇到这样的难题，这次抽点时间整理记录一下。
这里真正实现了文字两端对齐功能，下面是代码，其中上面一种使用的是表格布局，下面的是使用的DIV。
这里有几个要注意的重点：
1、从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。
2、如果文字一行显示不完，例如下面的代码，需要加上，但是千万不要在需要两端对齐的地方加，如果加上white-sapce：pre-wrap的话，就Firefox和IE就无法很好的实现两端对齐了。
white-space: pre-wrap;
word-break: break-all;
尤其是对于英文字母来说，不加上break-all是不会换行的。
文字两端对齐
* {
padding: 0;
margin: 0;
}
body {
padding: 10px 30px;
}
h3 {
font-size: 16px;
margin: 30px 0 10px;
}
table {
width: 300px;
}
td {
border: 1px #ccc solid;
font-size: 13px;
}
.title {
width: 60px;
height: 22px;
line-height: 22px;
float: left;
text-align: justify;
text-justify: inter-ideograph; /*为了兼容IE*/
text-align-last: justify;/* ie9*/
-moz-text-align-last: justify;/*ff*/
-webkit-text-align-last: justify;/*chrome 20+*/
}
.title:after {
content: ".";
display: inline-block;
width: 100%;
overflow: hidden;
height: 0;
}
.maohao {
line-height: 22px;
width: 10px;
float: left;
}
.detail {
float: left;
width: 220px;
line-height: 22px;
white-space: pre-wrap;
word-break: break-all;
}
#justify {
width: 300px;
height: auto;
font-size: 13px;
}
借助表格实现文字两端对齐：
| 姓名 | : | 好长的名字jkjkjdkajkdjakjdajdkajdaskdjajkdjk |
| 最高学历 | : | 研究生 |
| 性别 | : | 男 |
| 签名 | : | 没有签名就是我的签名 |
| Age | : | 28 |
| C l a s s | : | 2 |
文字两端对齐：
html中表格中字体两端对齐,CSS真正实现文字两端对齐布局相关推荐
- html文字纵向居中对齐,css怎么把文字居中对齐？
css怎么把文字居中对齐?下面本篇文章就来给大家介绍一下使用CSS设置文字居中对齐的方法,希望对大家有所帮助. 在CSS中设置文字居中对齐的方法:使用text-align属性来使文字水平居中 使用li ...
- css如何实现文字两端对齐,CSS如何实现文字两端对齐效果？
想要实现文字两端对齐效果,可以使用CSS的text-align属性.设置text-align: justify;即可实现文字两端对齐效果. 两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效 ...
- html文字左右自动对齐,小技巧：CSS如何实现文字两端对齐
原标题:小技巧:CSS如何实现文字两端对齐 需求如下,红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要像下面这样两端对齐呢? 我相信以前很多人都这么 ...
- CSS 如何实现文字两端对齐
CSS 如何实现文字两端对齐 需求 红框所在的文字有四个字的.三个字的.两个字的,如果不两端对齐可以选择居中对齐,或者右对齐.但是如果要想文字两端对齐呢? 代码 <div>姓名</d ...
- latex 分行 表格标题过长_latex排版中表格中 表格文字太长需要强制换行。
latex排版中表格中 表格文字太长需要强制换行. (2017-11-17 10:02:20) 标签: it 教育 科研 \newcommand{\tabincell}[2]{\begin{tabul ...
- Latex中表格中固定表格宽度时出现错误“LaTeX Error: Illegal character in array arg.”
Latex中表格中固定表格宽度时出现错误"LaTeX Error: Illegal character in array arg.",如下: \documentclass{arti ...
- html中怎么把字体向上调,css怎么调整字体？
css怎么调整字体?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么调整字体? 在CSS中可以使用字体(font)属性来调整字体.CSS字体属性 ...
- html语言两端对齐咋写,CSS如何实现文字两端对齐效果？
两端对齐在导航nav的制作中非常常用,那么如何实现两端对齐效果?下面本篇文章就来给大家介绍一下使用CSS实现文字两端对齐效果的方法,希望对大家有所帮助. 想要实现文字两端对齐效果,可以使用CSS的te ...
- css如何实现文字两端对齐效果
想要实现文字两端对齐效果,可以使用CSS的text-align属性.设置text-align: justify;即可实现文字两端对齐效果. 方法1:给元素设置 text-align: justify; ...
最新文章
- 企业级nosql数据库应用与实战-redis
- 11、设置视图半透明而子控件不透明
- Eclipse中将Java项目转换成Web项目的方法
- Hadoop入门实例——WordCount统计单词
- 笔记-高项案例题-2018年上-人力资源管理-建设项目团队
- step4 . day6 线程与线程的创建
- Apache 安装的2种方法
- python动态规划详解_python----动态规划
- linux之我常用的20条命令(之一)
- bat调用ant_bat调用ant_Ant调用批处理文件编译VS2005程序
- REDIS中加锁和解锁问题
- 中缀表达式转后缀表达式
- 初中英语多词性单词怎么办_初中英语单词按词性分类表.pdf
- linux 学习感悟
- 小心！新媒体环境下，营销传播还有几个大坑！
- 读取、回收和重用：使用 Excel、XML 和 Java 技术轻松搞定报告，第 2 部分
- Go webrtc项目pion创始人专访 | Gopher Daily (2021.04.07) ʕ◔ϖ◔ʔ
- c语言二级字符指针运用（字符串）
- 《卓有成效的管理者》——学习心得（一）
- pycharm中的查找何替换快捷键