html - 为超过两行或更多行的文本设置行高

Question

我目前正在格式化我的网站以便在移动设备上查看，当文本超过两行但没有应用换行符时，我看不到如何在 div 中设置文本的行高。

这是我当前的 CSS...

#ProjectName {
font-family: "helvetica_roundedbold";
font-size: 22px;
color: #000000;
margin: 0;
padding: 0;
padding-bottom: 10px;
width: 100%; 
z-index: 10; 
position: fixed; 
left: 200px; 
top: 31px; 
height: auto;}

应用于以下 div...

<div id="ProjectName">
<a href="design_museum.html">Design Museum</a><br />
<a href="blendings_tea.html">Blendings Tea</a><br />
<a href="europes_metros.html">Europes Metros</a><br />
<a href="letter_e.html">Letter E</a><br />
<a href="must_see.html">Must See</a><br />
<a href="torsion.html">Torsion</a><br />
<a href="arts_and_crafts_movement.html">Arts & Crafts Movement</a><br />
</div>

当前超过两行的文本行是“工艺美术运动”。

任何建议都会很好。

Answer 1

这是一种方法。设置父级 div (#ProjectName) 的主要行高，然后为 a 设置 display: inline-block 元素以及不同的行高值。在 a 元素上使用 vertical-align: top 可以获得更好的结果。

#ProjectName {
  font-family: "helvetica_roundedbold";
  font-size: 22px;
  color: #000000;
  margin: 0;
  padding: 0;
  padding-bottom: 10px;
  width: 400px; /* to force a line break */
  z-index: 10;
  /* 
  position: fixed;
  left: 200px;
  top: 0px;
  */
  height: auto;
  line-height: 2.0;
  border: 1px dotted gray;
}
#ProjectName a {
  vertical-align: top;
  border: 1px dotted blue;
  display: inline-block;
  width: 50%;
  line-height: 1.0;
}

<div id="ProjectName">
  <a href="design_museum.html">Design Museum</a><br />
  <a href="blendings_tea.html">Blendings Tea</a><br />
  <a href="europes_metros.html">Europes Metros</a><br />
  <a href="letter_e.html">Letter E</a><br />
  <a href="must_see.html">Must See</a><br />
  <a href="torsion.html">Torsion</a><br />
  <a href="arts_and_crafts_movement.html">Arts & Crafts Movement</a><br />
</div>