Question

我正在尝试将第二行文本拉伸到第一行文本的整个宽度。那可能吗？意义cheap cars将写在washington占用的相同宽度空间中。类似地，假设我将第一行文本设置为像vegas那样短，然后第二行文本必须shrink到vegas占用的宽度空间。可能的？

＆＃13;

.hello {
  width: 50%;
 }

.hello p {
	font-size: 40px;
	color: blue; 
}

.hello p span {
	font-size: 20px;
	color: red;
	display: block;
}

＆＃13;

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

＆＃13;

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

Answer 2

嗯，我想你正在寻找lette-spacing属性，但除非你使用JS / jQuery做一些复杂的计算，否则我认为你不能让它变得动态。

如果指定了正确的值，它的外观如下：

＆＃13;

.hello {
  width: 50%;
}

.hello p {
  font-size: 40px;
  color: blue;
}

.hello p span {
  font-size: 20px;
  letter-spacing:20px;
  color: red;
  display: block;
}

＆＃13;

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

＆＃13;

Answer 3

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>

无论字符数如何，都要使两行文本具有相同的宽度

3 个答案: