单行和多行文本的不同文本定位

时间:2016-07-13 02:28:43

标签: html css css3

是否可以仅使用CSS为单行和多行文本设置不同的文本定位?

例如:我希望我的单个短文本行与中心对齐,但是当文本超出单行长度并变为多行文本时,它应该左对齐。

3 个答案:

答案 0 :(得分:2)

您可以结合使用不同的text-aligndisplay值来实现这一目标。



.outer {
  text-align: center; /*center the inner inline block mainly*/
  display: block; /*not needed here but if using nested <span>s*/
}
.inner {
  text-align: left; /*reset the text to be left aligned*/
  display: inline-block; /*the width of the box based on content length*/
}
&#13;
<div class="outer">
  <div class="inner">The quick brown fox jumps over the lazy dog.</div>
</div>
<hr>
<div class="outer">
  <div class="inner">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice.</div>
</div>
&#13;
&#13;
&#13;

您还可以使用flexbox,这样也可以轻松地对文本进行垂直居中。

&#13;
&#13;
.container {
  display: flex;
  justify-content: center; /*center horizontally*/
  align-items: center; /*center vertically*/
  height: 100px;
  border: 1px solid;
}
&#13;
<div class="container">
  The quick brown fox jumps over the lazy dog.
</div>
<hr>
<div class="container">
  "The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice.
</div>
&#13;
&#13;
&#13;

另一种方法是使用CSS表格水平居中,类似于other建议,但也使用CSS表格单元格进行垂直居中。

&#13;
&#13;
.outer {
  display: table;
  margin: auto; /*center horizontally*/
  height: 100px;
  border: 1px solid;
}
.inner {
  display: table-cell;
  vertical-align: middle; /*center vertically*/
}
&#13;
<div class="outer">
  <div class="inner">The quick brown fox jumps over the lazy dog.</div>
</div>
<hr>
<div class="outer">
  <div class="inner">"The quick brown fox jumps over the lazy dog" is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice.</div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

您可以使用CSS表格:

&#13;
&#13;
div {
  display: table;
  margin: 0 auto; /* Center container horizonatlly */
  text-align: left; /* Align text to the left */
}
&#13;
<div>The quick brown fox jumps over the lazy dog.</div>
<hr />
<div>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
&#13;
&#13;
&#13;

CSS表的工作原理是因为它们使用缩小到拟合算法来调整大小,但仍然是块级流入元素。 CSS3通过fit-content关键字公开此尺寸,因此您不再需要依赖奇怪的表格布局,但它尚未得到广泛支持。

&#13;
&#13;
div {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto; /* Center container horizonatlly */
  text-align: left; /* Align text to the left */
}
&#13;
<div>The quick brown fox jumps over the lazy dog.</div>
<hr />
<div>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
&#13;
&#13;
&#13;

答案 2 :(得分:-1)

在CSS中没有办法做到这一点,尽管可以在JavaScript中完成。我将从使用string.length开始确定字符数(虽然不同的字体呈现不同,不同的字符可能有不同的宽度)。从那里你可以使用jQuery或selectElement(s)By *来通过类或css添加和删除对齐。