Question

我的页脚中有一个多行地址，需要在某些屏幕宽度处断行。

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

出于某种原因，有几行不再按照应有的方式行事，我无法解决原因。

无论我将特定行设置为什么，它总是单独出现在一行中，这不是我想要的。另外两条线应该突破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旁边，它有显示：block;有什么建议为什么不是？

当媒体查询在768px上播放时，.address7会降到.address6以下，这就是我想要的，但是在2之间会出现一行空格。再次，任何想法为什么？

这是在需要时处理断线的最佳方法，还是有更好的方法？我甚至尝试过添加类，并尝试使用另一种方法：

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的最后一部分：在我认为应该将.address2之后的行移到414px的下一行，但它没有。

有关处理我想要的线路的最佳方法的任何建议吗？

欢呼

Answer 1

display:block的一个问题是，无论周围的元素是什么样的，这些元素总是显示在它们自己的一条线上;是display:inline还是不是。{ 因此，要回答您的问题：块跨度旁边的内联块跨度不会位于同一行的旁边。中间有  的两个块跨度将各自在它们自己的行上，而  之间的另一行（这看起来像一个空行）。

要解决整个问题，我首先将其简化为：

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>

在您想要换行的实际中断处，并且所有跨度都变成内联块以避免其内部发生意外中断，并让页面流完成剩下的工作。

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

跨度线中断问题

1 个答案: