html - 跨度换行问题

Question

我的页脚中有一个多行地址，需要在特定屏幕宽度处换行。

我在 <span> 中设置了每一行用类标记，然后在 CSS 中分配 block 或内联 block 。

出于某种原因，有几行不再按应有的方式运行，我无法弄清楚原因。

无论我将特定行设置为什么，它总是单独出现在一行中，这不是我想要的。还有 2 条线在它们应该断开的时候断开，768px，但是线之间出现了间隙。

HTML

<span class="address">FEAST THAILAND</span> 
<span class="address1">10 NAEBKHEHART ROAD HUA HIN</span>
<span class=“address2”>(Inside The Memory Hua Hin) </span>
<span class="address3">PRACHUAP KHIRI KHAN, 77110 THAILAND</span>
<span class=“address4”>+66 (0) 32 510 207</span>
<span class="address5">OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span>
<span class="address6"><a href="http://feastthailand.com/privacy-policy/"><strong>PRIVACY POLICY</strong></a>&#160;&#160;&#160;&#160;<a href="http://feastthailand.com/terms-conditions/"><strong>TERMS & CONDITIONS</strong></a></span>&#160;&#160;&#160;&#160;<span class="address7"><a href="http://feastthailand.com/waiver-release-liability/"><strong>WAIVER & RELEASE OF LIABILITY</strong></a></span>
<span class="address8"><strong>©2017</strong> ALL RIGHTS RESERVED</span>
<span class="address9">TAT License No. 14/02344</span>

CSS

.address,
.address1,
.address2,
.address4,
.address6,
.address7 {
    font-size: 11px;
    font-weight: normal;
    font-family: Lato, sans-serif;
    letter-spacing: 1.5px;
        text-align: center;
    display: inline-block;
        color: #000000;
}
.address3,
.address5,
.address8,
.address9 {
    font-size: 11px;
    font-weight: normal;
    font-family: Lato, sans-serif;
    letter-spacing: 1.5px;
        text-align: center;
    display: block;
        color: #000000;
}

显然这只是没有媒体查询的标准 CSS，但是 .address4，它有 display: inline-block;应该坐在 .address3 旁边，它有 display: block;有什么建议为什么不是吗？

当媒体查询在 768px 处开始播放时，.address7 下降到 .address6 下面，这是我想要的，但两者之间出现了一条空格。同样，有什么想法吗？

这是在需要时处理断线的最佳方法，还是有更好的方法？我什至尝试使用
添加了一个类，并尝试在此处找到另一种方法:

CSS

@media only screen and (max-width: 414px){
  .address2 {
   font-size: 10px;
    font-family: Lato, sans-serif;
    letter-spacing: 1.5px;
        text-align: center;
        color: #000000;
    display: block;
}
.address2:after {
    content:"\a";
    white-space: pre;
}
}

最后一部分与 .address2:after 我认为应该将 .address2 之后的行移动到 414px 处的下一行，但它没有。

关于在我想要的地方处理断线的最佳方法有什么建议吗？

干杯

Answer 1

display:block 的一个问题是那些元素总是显示在它们自己的一行上，不管周围的元素是什么样子；是display:inline或者不是。
所以回答你的问题: block 跨度旁边的内联 block 跨度不会在同一行上紧挨着它。两个 block 跨越   中间的每一个都在自己的行上，中间有另一行   是(这看起来像一个空行)。

为了解决整个问题，我首先将其简化为:

div.addressblock {
  text-align: center;
}

div.addressblock span {
  font: normal 11px 'Lato', sans-serif;
  letter-spacing: 1.5px;
  display: inline-block;
  color: #000000;
}

div.addressblock a {
  font-weight:bold;
  padding:0 .5em}

<div class="addressblock">
  <span>FEAST THAILAND</span>
  <span>10 NAEBKHEHART ROAD HUA HIN</span>
  <span>(Inside The Memory Hua Hin) </span>
  <span>PRACHUAP KHIRI KHAN, 77110 THAILAND</span><br>
  <span>+66 (0) 32 510 207</span>
  <span>OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span><br>
  <span><a href="http://feastthailand.com/privacy-policy/">PRIVACY POLICY</a>
        <a href="http://feastthailand.com/terms-conditions/">TERMS &amp; CONDITIONS</a>
        <a href="http://feastthailand.com/waiver-release-liability/">WAIVER &amp; RELEASE OF LIABILITY</a></span>
  <span><b>©2017</b> ALL RIGHTS RESERVED</span><br>
  <span>TAT License No. 14/02344</span>
</div>

在您希望换行的地方进行实际换行，并将所有跨度变成内联 block 以避免在其中出现不需要的换行，让页面流完成剩下的工作。

如果您希望在特定屏幕宽度下发生其他事情，您可以随时添加一些额外的 CSS。