css - 创建特定宽度的 或带文本换行的 2 行框

Question

我正在创建一个新的首页，您可以在这里找到 http://www.rosstheexplorer.com/front-page-test/

当图片上方的文字很短时，例如“Franz Joesf”，那么我的代码是

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

当图片上方的文字很长时，例如“Nearly Dying In The Outback”，我使用代码

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

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

尽管例如，当页面宽度介于 807 和 867 之间时，文本“Great Australian Bight”分两行，而“Franz Joesf”和“Kinabatangan”仍然占一行。 'Great Australian Bight'文字图片代码如下

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

是否可以让代码在页面宽度在807-867之间时不生效？

根据下面的建议，我尝试了以下操作

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

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

是否可以设置

white-space: wrap;

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

我尝试使用

创建两行

@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%;
}
}

我试过了

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

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

我注意到上面的代码有

</span

我已通过将此代码放入附加 CSS 中解决了这个问题 -

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

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

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

显然 4/1.8 不等于 2。当我有 'height:3.6em' 时，每当文本换行到第二行时，文本和图片看起来会很尴尬。

主页上有这段代码

<span style="font-size: 18pt;"><strong>Hey, I am Ross. 30 months ago I quit my job in England, jumped on a plane and started a bonkers journey. It has been filled with many ups, downs, twists and turns. Seeing elephants in Borneo was brilliant, getting </strong></span><span style="font-size: 18pt;"><strong>blacklisted from Vietnam was not so fun, fortunately I got back into the country. Read more about my story <a href="http://www.rosstheexplorer.com/about-me/">here</a>. </strong></span>




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

<div class="DestinationHeaderWrap"><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="DestinationHeaderWrap"><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="DestinationHeaderWrap"><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>


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

<div class="DestinationHeaderWrap"><strong><a href="http://www.rosstheexplorer.com/vietnam/teaching-in-vietnam/"><span style="font-size: 18pt;">Teaching in Vietnam</span></a></strong></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Vietnam-Teaching-English-600-by-600-2.jpg" alt="Vietnam - Teaching English - Classroom" width="600" height="600" />

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

<div class="DestinationHeaderWrap"><span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/stray-q-and-a/">Stray Bus Q and A</a></strong></span></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/New-Zealand-Stray-Bus-600-by-600-2.jpg" alt="New Zealand - Stray Bus" width="600" height="600" />

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

<div class="DestinationHeaderWrap"><span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/food-costs-in-se-asia/">Food Costs in SE Asia</a></strong></span></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/SE-Asia-Food-Prices-Sapa-600-by-600-2.jpg" alt="Sapa BBQ" width="600" height="600" />

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

<div class="DestinationHeaderWrap"><strong><a href="http://www.rosstheexplorer.com/philippines/malapascua/"><span style="font-size: 18pt;">Learning to Scuba Dive</span></a></strong></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Philippines-Malapascua-Diving-600-3.jpg" alt="Philippines - Malapascua - Diving" width="600" height="600" />

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

<div class="DestinationHeaderWrap"><span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/vietnam/blacklisted-from-vietnam/">Teaching in Japan</a></strong></span></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Tokyo-600-2.jpg" alt="Japan - Tokyo " width="600" height="600" />

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

<div class="DestinationHeaderWrap"><span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/vietnam/tam-dao/">Tam Dao</a></strong></span></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Tam-Dao-thumbnail-600-600.jpg" alt="Vietnam - Tam Dao " width="600" height="600" />

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

<div class="DestinationHeaderWrap"><strong><a href="http://www.rosstheexplorer.com/australia/boss-threatened-punch-backpacker/"><span style="font-size: 18pt;">Working For A Violent Boss</span></a></strong></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2017/06/home-page-the-crap-times.jpg" alt="Australia Carnival" width="600" height="600" /></div>

<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign">
<div class="DestinationHeaderWrap"><span style="font-size: 18pt;"><strong><a href="http://www.rosstheexplorer.com/vietnam/blacklisted-from-vietnam/">Blacklisted From Vietnam</a></strong></span></div>
<img class="Thumbnail48PercentPictureSize" src="http://www.rosstheexplorer.com/wp-content/uploads/2018/03/Vietnam-Hanoi-Hoàn-Kiếm-Lake-600-by-600.jpg" alt="Vietnam - Hanoi - Hoàn Kiếm Lake " width="600" height="600" /></div>

<div class="IconWidth31Percent PlaceWhiteIcon VerticalAlign">
<div class="DestinationHeaderWrap"><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></div>
<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>

Answer 1

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

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

然后在867px之后重新设置