Question

我正在创建一个新的首页，您可以在此处找到this pull request.

如果图片上方的文字很短，例如'Franz Joesf'，那么我的代码就是

SUM(CASE WHEN COALESCE(D.CURRENCY,'MYR') = 'MYR' THEN 1 ELSE 0 END) CUR4

当图片上方的文字很长时，例如“近乎死在内陆地区”我使用的代码

<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign">

<span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/new-zealand/franz-joesf/">Franz Joesf</a></strong></span>
<div></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/New-Zealand-South-Island-Franz-Joesf-600-by-600-Attempt-2.jpg" alt="New Zealand - Franz Joesf" width="600" height="600" />

</div>

不同之处在于图像与Franz Joesf之间存在空白。这意味着当页面以全宽度加载到桌面上时，所有图像都很好地排列。

虽然例如当页面的宽度在807和867之间时，文本'Great Australian Bight'分布在2行，而'Franz Joesf'和'Kinabatangan'仍然适合在一行。 “Great Australian Bight”文字和图片的代码如下

<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign">
<span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/australia/nearly-dying-in-the-outback/">Nearly Dying In The Outback</a></strong></span>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Australia-Northern-Territory-Alice-Springs-Mount-Gillen-600-by-600-1.jpg" alt="Australia - Northern Territory - Alice Springs - Mount Gillen" width="600" height="600" /></div>

是否有可能使页面宽度介于807-867之间时代码不生效？

根据以下建议，我尝试了以下

<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign">

<strong><a href="http://www.rosstheexplorer.com/great-australian-bight-marine-park-sa/"><span style="font-size: 18pt;">Great Australian Bight</span></a></strong>
<div></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Great-Australian-Bight-600-by-600.jpg" alt="Great Australian Bight" width="600" height="600" />

</div>

不幸的是，它没有达到预期的效果。作为主页，我不希望用户看到“Great Australian Big”，重要的是他们看到全名“Great Australian Bight”。

是否可以设置

@media (min-width: 807px) and (max-width: 867px) {
    .IconWidth31PercentTest p:first-child {
     text-overflow: ellipsis;
     width: 100%;
     overflow: hidden;
        white-space: nowrap;}
}

<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign IconWidth31PercentTest">

<strong><a href="http://www.rosstheexplorer.com/great-australian-bight-marine-park-sa/"><span style="font-size: 18pt;">Great Australian Bight</span></a></strong>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Great-Australian-Bight-600-by-600.jpg" alt="Great Australian Bight" width="600" height="600" />

</div>

并且有一个包含2行的文本框，当文本超过第一行的宽度时，它将流到第二行。

我尝试使用

创建两行

white-space: wrap;

我试过这个

@media (min-width: 807px) and (max-width: 867px) {
.IconWidth31PercentTest3 
    p {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: wrap;
    text-overflow: ellipsis;
    width: 100%;
}
}

正如你在http://www.rosstheexplorer.com/front-page-test/所看到的那样，这肯定是行不通的。

我注意到上面的代码有

<h2 style="text-align: center;">The Brilliant Times</h2>
<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign">

<div class="IconWidth31PercentTest3"><strong><a href="http://www.rosstheexplorer.com/great-australian-bight-marine-park-sa/"><span style="font-size: 18pt;">Great Australian Bight</span></a></strong></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Great-Australian-Bight-600-by-600.jpg" alt="Great Australian Bight" width="600" height="600" />

</div>
<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign">

<div class="IconWidth31PercentTest3"><span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/new-zealand/franz-joesf/">Franz Joesf</a></strong></span</div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/New-Zealand-South-Island-Franz-Joesf-600-by-600-Attempt-2.jpg" alt="New Zealand - Franz Joesf" width="600" height="600" />

</div>
<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign">

<div class="IconWidth31PercentTest3"><span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/new-zealand/franz-joesf/">Kinabatangan River</a></strong></span</div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/New-Zealand-South-Island-Franz-Joesf-600-by-600-Attempt-2.jpg" alt="New Zealand - Franz Joesf" width="600" height="600" />

</div>

我通过将此代码放在附加CSS中来修复此问题 -

</span

显然4 / 1.8不等于2.当我有'height：3.6em'时，文字和图片在文字包裹到第二行的任何时候都会看起来很笨拙。

在主页上显示此代码

@media (min-width: 520px)  {
    .DestinationHeaderWrap {

    line-height: 1.8em;
    height: 4em;
    overflow: hidden;

    text-overflow: ellipsis;
        width: 100%;}
}

Answer 1

因此，在审核您的标记时，我能想到的唯一解决方案就是这个。

@media (min-width: 807px) {
   .IconWidth31Percent p:first-child {
     text-overflow: ellipsis;
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
}

然后在867px

之后重置它

以特定宽度创建<div> </div>或使用文本换行创建2行框

1 个答案: