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

发布时间：2020-12-14 23:28:48 所属栏目：资源来源：网络整理

导读：是否可以使用CSS为单行和多行文本设置不同的文本定位？例如：我希望我的单个短行文本在中心对齐,但是当文本超过单行长度并成为多行文本时,它应该保持对齐. 解决方法您可以使用CSS表： div { display: table; margin: 0 auto; /* Center container horizona

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

例如：我希望我的单个短行文本在中心对齐,但是当文本超过单行长度并成为多行文本时,它应该保持对齐.

解决方法

您可以使用CSS表：

div {
  display: table;
  margin: 0 auto; /* Center container horizonatlly */
  text-align: left; /* Align text to the left */
}

<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>

CSS表的工作原理是因为它们使用缩小到拟合算法来调整大小,但仍然是块级流入元素. CSS3通过fit-content关键字公开这个大小,所以你不再需要依赖奇怪的表格布局,但它还没有被广泛支持.

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 */
}

<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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!