首页 > 解决方案 > html - “宽度:100%”页面中的文本溢出

问题描述

我有一个链接溢出页面的页面。我希望他们能留在下面的线上。

我放了以下几行: display:inline-block; overflow: auto; 但没有用。

.hashtag {
            font-family: 'Titillium Web', sans-serif;
            padding: 28px;
            font-size: 30px;
            width: auto;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
            background-color: rgb(98,124,169,0.8);
            color: white;
            display: inline-block;
            line-height: 1;
<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;" class="hashtag" id="load2">TODAY</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;overflow: auto;" class="hashtag" id="load3">LIVE</a>&nbsp;<a href="player-hd/podcasts.html" style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;overflow: auto;" class="hashtag">PODCASTS</a>

(对不起我的英语)提前谢谢。

标签: htmlcss

解决方案


您需要添加vertical-align:middle;to.hashtag以阻止第一个元素被下拉。您还可以添加white-space: nowrap;到父center元素以停止元素包装。

center {
  white-space: nowrap;
}
.hashtag {
            font-family: 'Titillium Web', sans-serif;
            padding: 28px;
            font-size: 30px;
            width: auto;
            text-align: center;
            text-decoration: none;
            margin: 5px 2px;
            background-color: rgb(98,124,169,0.8);
            color: white;
            display: inline-block;
            line-height: 1;
            vertical-align:middle;
         }
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;" class="hashtag" id="load2">TODAY</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;overflow: auto;" class="hashtag" id="load3">LIVE</a>&nbsp;<a href="player-hd/podcasts.html" style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;overflow: auto;" class="hashtag">PODCASTS</a></span>


推荐阅读