无论字符数如何，使两行文本的宽度相同答案

【问题标题】：Make two lines of text the same width regardless of character count无论字符数如何，使两行文本的宽度相同
【发布时间】：2018-01-16 04:16:28
【问题描述】：

我正在尝试使第二行文本拉伸到第一行文本的整个宽度。那可能吗？意思是cheap cars 将被写入washington 占据的相同宽度空间中。同样，假设我使第一行文本像vegas 这样短，那么第二行文本必须shrink 到vegas 占用的宽度空间。可能吗？

.hello {
  width: 50%;
 }

.hello p {
	font-size: 40px;
	color: blue; 
}

.hello p span {
	font-size: 20px;
	color: red;
	display: block;
}

<a class="hello" href="#"><p>WASHINGTON<span class="site-subtitle">cheap cars</span></p>
			</a>

【问题讨论】：

text-align-last: justify，或者如果你还需要IE支持，把字幕中的每个单词都换成一个span，然后使用flexbox & justify-content: space-between
你不能神奇地改变第二行的字体大小，所以它的内容的宽度会适应第一行的宽度，而不是占据第三、第四行（在 CSS 中）。元素可以具有相同的宽度，仅此而已。
不知道你为什么想要那个。最好的办法是拥有一个容器，并将两条线放在容器内的单独 div 中。

标签： html css

【解决方案1】：

理论上，有一种简单的方法可以做到这一点。将text-align 属性设置为justify-all（或将text-align-last 设置为justify）并将text-justify 设置为inter-character。这应该将每行上的字符隔开以填充整个宽度。但是，在撰写本文时，似乎缺乏浏览器支持。

p {
    text-justify: inter-character;
    text-align: justify-all;
    /* or */
    text-align-last: justify;
}

<p class="one">
    Washington<br>
    Cheap Cars
<p>

<hr>

<p class="two">
    Vegas<br>
    Cheap Cars
<p>

但是，即使这确实有效，您也可能不想要它会产生的效果：

V    e    g    a    s
C h e a p  c  a  r  s

解决此问题的唯一其他方法是使用letter-spacing 和font-size 的组合，并手动调整此模式的每个实例：

p {
    font-size: 35px;
    font-weight: bold;
    font-family: arial;
}
p span {
    display:block;
}

.one span:last-of-type {
    letter-spacing: 2px;
    font-size: .93em;
}

.two span:first-of-type {
    letter-spacing: 11px;
    font-size: 1.5em;
}

<p class="one">
    <span>Washington</span>
    <span>Cheap Cars</span>
<p>
<hr>
<p class="two">
    <span>Vegas</span>
    <span>Cheap Cars</span.
<p>

【讨论】：

【解决方案2】：

a{
text-decoration: none;
  width: 50%;
 }

a p {
	font-size: 40px;
  line-height:0.6;
	color: blue; 
}

a p span {
	font-size: 20px;
  letter-spacing: 20px;
	color: red;
 }

<a href="#"><p>WASHINGTON<br><span>cheap cars</span></p>
			</a>

【讨论】：