分享怎样用CSS控制文本左右对齐且word首行对齐缩进的方法

来源：蜘蛛抓取(WebSpider) 时间：2018-09-15 03:17 标签： word首行对齐
  • 现在来说一说对齐的几种方法：

    • auto :允许浏览器用户代理确定使用的两端对齐法则 

    inter-word :通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 

    newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 

    inter-ideograph : 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 

    说明： 设置或检索对象内文本的对齐方式。 

    CSS中一提到单词断行，最先映入脑海的肯定是word-break和word-wrap这两条属性。但对于这两条属性到底有什么区别，兼容性如何，我一直都概念模糊。今天抽空把它们以及CSS3中新加入的断行属性之间的区别和作用理理清楚，做一下笔记。

    在英文段落中有时会碰到一些很长的单词，这些单词的长度超出容器宽度。在默认的页面文档中，如果单词长度超出了单行，会被自动移到下一行中，图中puzzling!就被自动换行了；而如果单词本身的长度已经超出容器宽度，常规的文档对此就没有约束力了，图中dddddd…这个单词就这么溢出了：

    为了不让这样超长的单词超出容器宽度，可以用word-break: break-all 强制断行。

    但是强制换行会把完整的单词打断，会影响阅读，而且一旦用word-break: break-all，单词内断行的频率会非常高（puzzling!这个不词不算长单词，也被轻易的打断了）。我们需要的只是在单词本身长度超出容器宽度的时候强制断行，一般情况下，只需要根据空格来判断后面的单词是否需要换行，所以用word-wrap: break-word 就可以了：

    所以用一个word-wrap: break-word，就能满足网页上最基本的换行排版了。

    让我们再深入一点。读书时候英语老师曾教过我们，英语书写在换行的时候，为了节约纸张，把每一行最后的格子也利用起来，可以给没写完的那个单词加一个横杠“-”在下一行继续写完这个单词即可。在网页中有没有办法实现？答案还是有的，只是这是一个CSS3的属性：hyphens: auto
    hyphens目前被浏览器支持度还比较有限，当前版本的谷歌浏览器Chrome就不支持，据我测试在Firefox，IE10+，Safari中还是被支持的，不过要给她加上几个熟悉的前缀：

    同时页面的编码也需要写成这种格式允许的语种：

    于是puzzling!这个单词在支持hyphens的浏览器中就自动加了横杠断行了：

    另外，hyphens还有一个有趣的值：manual，可以通过特殊符号给单词人为的添加横杠断行，但个人觉得很少能用得到。具体可以参考，里面还有浏览器兼容性列表

    本文的实例代码在这里：。可以在不同的浏览器中打开这个页面查看单词断行的区别。

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

响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显得越来越重要。那么，如何使用css实现两端对齐，相信很多同学会文本对齐的text-align:justify，这是今天要讲的其中一种方式，另外还有两种更精彩的实现方式，请往下看~

下图是需要实现的demo，取了宽度分别为320px、480px、640px下的截图，也就是说再随浏览器窗口宽度的调整，按钮菜单高度不变，宽度会按比例自动适应，且左右两端对齐：

感谢join同学提供的方案，使用该方案可以做到兼容所有的浏览器，不过实现起来会比较复杂，而且带有hack的味道

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格

关于盒模型布局的介绍，这里有篇文章《》，写得不错，推荐给大家~

方法三：使用column(多列布局)

column也是是css3的属性，意思是多列布局，使用column来实现两端对齐也十分简单，只需要设置模块的个数跟column的列数一致即可，不过它的自动适应方式跟使用box-pack还有有点差别，并不是很标准，像列与列的间距暂无法定义为百分比。值得高兴的是目前支持所有高级浏览器，对IE10的支持也良好，而IE9及以下版本不支持，webapp开发中，对于不需要兼容winphone7手机(IE9)的需求来说，可以充分发挥column的强大作用~

关于column的使用方法，w3school的有相关教程：

1.column-count定义了对象的列数,例子中有4个模块，那么定义为4列 2.column-gap定义了对象中列与列的间距，间距不能设置为百分比，显得不够灵活

移动端文本两端对齐示例

林小志大神的解决方案（补充于：）

以上3种实现方式各有优缺点，具体看实际项目使用，如果大家有更好的实现方式，欢迎留言探讨~

word怎么设置每个段落的开头首行缩进两格

问题描述:文章没有排版，怎么样让每个段落的开头都缩进两个字符呢？

网友热点@民生给出的答案是:

1、选择“格式”里的“段落”，如果已经有段落了，可以选中你要首行缩进的段落：

2、再看特殊格式，选择“首行缩进”：

3、再把“度量值”增加到2字符，点击确定：

1、在开始栏，选择段落边上的那个小按钮：

2、同样在特殊格式里选择“首行缩进”：

3、然后磅值默认是2字符，不用调，点击确定即可：

excel里，如何设置段落首行缩进？

问题描述:就是一个单元格里有一段文字，要第一行缩进两个字，不是整段，也不要打空格的方式，因为是大量的。先谢谢各位大侠了！
使用公式的朋友，先谢了，但是使用公式后，行距没法通过“拼音格式”里设置，所以不能用，cmd803 兄弟提供的地址倒让我兴奋，但是好像说的是word，excel里面我找了半天也没找到相关选项

网友不该年少轻狂给出的答案是:

excel里，设置段落首行缩进的方法；

首先在excel表格里，右键设置单元格格式，

在单元格格式中设置，如下图所示。

这只对作了此设置的单元格有效，其他问题不在此列。

word 里面首行缩进是怎么搞的，什么意思

首行缩进是指每段第一行向右空出的距离或者字符个数，中文文档习惯上要向右空两个字符。

选中文字点鼠标右键——段落

就会出现对话框，如图所示。

首行缩进快捷键 word如何设置首行缩进快捷键

网友涵秋蓉缘19给出的答案是:在新版本的office里，可以通过自定义快捷键来提高工作效率。具体操作：文件选项自定义功能区键盘快捷键自定义在类别里下拉找所有命令右边的命令里找IndentFirstLine下边按新的快捷键可以自己认定，我按的ctrl+J点左下角的指定后关闭即可。这样设置后按快捷键设置后，在段落里看到的是缩进的尺寸（厘米），这个跟你的字体大小是关联的，与2字符是一样的效果。

css中首行缩进什么代码，，

word怎么把编号后的下一行不自动首行缩进

网友巴蜀兄弟连给出的答案是:

第一次的时候，红圈里的拉过去你想的要位置；

上述内容为转载或编者观点，不代表新家网意见，不承担任何法律责任。

我要回帖

更多关于 word首行对齐 的文章

 

随机推荐