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>

目前在两行中运行的文字是'Arts＆amp;工艺品运动'。

任何建议都会很棒。

Answer 1

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

#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更改为屏幕大小。

为两行或多行运行的文本设置行高

2 个答案: