AtoZ CSS屏幕录像：对齐文本

Loading the player…

正在加载播放器…

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

Justify is one available value for the text-align property.

对齐是text-align属性的一个可用值。

It allows the formatting of text in a style often used in newspaper design.

它允许以报纸设计中常用的样式设置文本格式。

In this episode, we’ll look at the 12 possible values for text-align, one of which is justify. Next, we’ll look at using justified text with CSS columns and finally look at how justify can be used to create a floatless responsive grid system with just a few lines of code.

在本集中，我们将研究text-align的12种可能值，其中之一是justify 。 接下来，我们将研究如何在CSS列中使用对齐的文本，并最终了解如何使用justify来创建仅需几行代码的无浮动响应网格系统。

文字对齐 (Text Align)

The text-align property performs a very familiar action of aligning text. Anyone who has read words on a page or used a word processor will be familiar with the idea of left, center or right aligned text.

text-align属性执行一个非常熟悉的text-align操作。 任何阅读过页面上的单词或使用过文字处理程序的人都会熟悉左对齐，居中对齐或右对齐文本的概念。

These are the 3 most common values used with text-align but there are others too.

这是与text-align一起使用的3个最常见的值，但还有其他一些。

• left

  left

• right

  right

• center

  center

• justify

  justify

• start

  start

• end

  end

• start end

  start end

• match-parent

  match-parent

• <string>

  <string>

• start <string>

  start <string>

• <string> end

  <string> end

• inherit

  inherit

The start and end keywords are similar to left and right but take the direction of text into account. If the language is left-to-right, start and left are equivalent. If the text direction is rtl then start and right are equivalent.

start和end关键字与left和right相似，但是要考虑文本的方向。 如果语言是从左到右，则start和left等价。 如果文本方向是rtl则start和right是等效的。

The match-parent value is similar to inherit but the start and end are calculated according to the parent’s direction. This value has poor browser support but does work in Chrome.

match-parent值与inherit相似，但start和end是根据父级的direction计算的。 此值对浏览器的支持不佳，但在Chrome中可以使用。

The <string> values allow alignment to be determined by an arbitrary string of text. This value is currently not supported in any browser, so I wasn’t able to test it. The example on MDN sounds quite useful though to align decimal values on the “.” full-stop string.

<string>值允许通过任意文本字符串确定对齐方式。 目前，任何浏览器均不支持该值，因此我无法对其进行测试。 MDN上的示例听起来很有用，尽管它可以使“。”上的小数点对齐。 句号。

CSS列 (CSS Columns)

Leaving behind this quagmire of browser compatibility and some rather niche uses for text-align, let’s look at something more visual where text-align: justify becomes very useful.

抛开了浏览器兼容性的泥潭，以及text-align一些特殊用途，让我们看一看在text-align: justify更直观的东西text-align: justify变得非常有用。

Sometimes a design will benefit from breaking up large blocks of text into multiple columns. This used to be the realm of some quite fiddly Javascript, but can now be done simply in CSS using the column-count property. This property is supported in all modern browsers but requires prefixes in everything except IE.

有时设计会受益于将大块文本分成多列。 这曾经是一些相当古怪的Javascript的领域，但现在可以使用column-count属性在CSS中轻松完成。 所有现代浏览器均支持此属性，但除IE之外的所有内容都需要前缀。

.box {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

Inline content is automatically reflowed as the available space changes. Pretty sweet.

内联内容会随着可用空间的变化而自动重排。 很甜

To make the visual impact of the columns stronger, and look more like a newspaper article, we can use text-align: justify.

为了使列的视觉冲击力更强并且看起来更像报纸上的文章，我们可以使用text-align: justify 。

格网 (Grids)

We’ve seen how we can manipulate text-align to justify copy and create neatly defined columns. It’s also possible to leverage justify to create a fluid, responsive grid system with no floats, no clearfixes and no dramas. For more info on float and solutions to some of its pain points, check out “Episode 6: Float”.

我们已经看到了如何操作文本对齐以证明复制合理并创建整齐定义的列。 也有可能利用justify来创建一个流畅，响应Swift的网格系统，该系统没有浮点，没有明确的修正，也没有戏剧性。 有关float更多信息以及解决其某些痛点的方法，请查看“第6集：浮动” 。

Justified text aligns its left and right edges to the left and right edges of its block container. We can create a series of inline-block elements and lay them out in a grid by justifying the contents of their container element. I read about this technique in an article published by Patrick Kunka in March 2013, and it’s pretty amazing.

对齐的文本将其左边缘和右边缘与其块容器的左边缘和右边缘对齐。 我们可以创建一系列inline-block元素，并通过证明其容器元素的内容将它们排列在网格中。 我在2013年3月由Patrick Kunka发表的一篇文章中了解了这种技术，这非常令人惊讶。

I’ll create an unordered list with a class of “grid-container” with six list items to act as “grid-items”.

我将创建一个带有“ grid-container”类的无序列表，其中包含六个列表项以充当“ grid-items”。

I’ll add a width, a background color and some padding to the list items to space them out a bit. I’ll also set them to display: inline-block which is required for them to be justified. To remove the spacing introduced by inline-block, I’ll set the font-size of the grid container to zero and the font-size of the grid items to 1rem.

我将为列表项添加宽度，背景色和一些填充，以将它们隔开一些距离。 我还将它们设置为display: inline-block ，这是证明它们合理性所必需的。 为了消除inline-block引入的间距，我将网格容器的font-size设置为零，并将网格项目的font-size设置为1rem 。

Now we set text-align: justify on the grid container but before the grid items will be equally spaced out, we need to create a full-width “hidden” element that will determine the space in which to spread out the items.

现在我们设置text-align: justify在网格容器上text-align: justify但是在网格项目被等距隔开之前，我们需要创建一个全角的“隐藏”元素，该元素将确定用于散布项目的空间。

Using an :after pseudo-element, a bit like the approach used in clearfix, we can force the width of the grid container to be as wide as its parent. Now the grid items space out correctly and reflow as the browser window changes size.

使用:after伪元素(类似于clearfix中使用的方法)，我们可以强制网格容器的宽度与其父容器一样宽。 现在，网格项正确地间隔开并随着浏览器窗口更改大小而重排。

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
ul { 
	margin: 0;
	padding: 0;
	text-align: justify; 
	font-size: 0; 
}
ul:after { 
	content: "";
	display: inline-block; 
	width: 100%; 
}
li { 
	display: inline-block; 
	width: 50%; 
	margin: 0 0 1em; 
	padding: 1em; 
	background: #eee; 
	font-size: 1rem; 
	text-align: left; 
}

Changing the width of the list items, allows you to easily create different numbers of columns without doing lots of calculations for margins and gutter widths. I think this is a fantastically simple and elegant technique and one that might come in handy for a future project.

更改列表项的宽度，可以轻松创建不同数量的列，而无需进行大量的边距和装订线宽度计算。 我认为这是一种非常简单而优雅的技术，可能会在将来的项目中派上用场。

Watch out for our Quick Tip article coming soon!

请留意即将发布的“快速提示”文章！

翻译自: https://www.sitepoint.com/atoz-css-screencast-justify-text/