为两行或多行文字设置行高

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

当前在两行上运行的文本行是"Arts&工艺运动。

任何建议都非常好。

Answer 1

这里有一种方法。在父级div（#ProjectName）上设置主行高度，然后为a元素设置display: inline-block以及其他行高度值。在CCD_ 6元素上使用CCD_。

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

Answer 2

您可以设置链接的行高。

#ProjectName a{line-height: 30px;}

您可以将线条高度设置为适合您的任何尺寸。

当屏幕大小为一定时，您可以使用媒体查询来获得不同的css。即

@media screen and (max-width: 500px) { css code here.... }

该媒体查询中的css代码只有在屏幕大小为500px或更小时才会运行。当需要更改线条高度时，您可以将500px更改为屏幕大小。