span標籤裡如何設定自動換行

span標籤是用來組合文件中的行內元素。 span 沒有固定的格式表現。當對它套用樣式時，它會產生視覺上的變化。當內容過長時，我們可以透過overflow: hidden;設定隱藏溢出部分，但有的應用場景下我們希望內容能夠自動換行，例如商城的產品資訊展示裡的產品名稱。

這裡我們需要用到的就是CSS裡的white-space屬性。 white-space 屬性設定如何處理元素內的空白。相關屬性值如下：

 

normal 預設值，空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的

 標籤。 <br>nowrap 文字不會換行，文字會在同一行上繼續，直到遇到 <br> 標籤為止。 <br>pre-wrap 保留空白符序列，但正常地進行換行。 <br>pre-line 合併空白符序列，但保留換行符號。 <br>inherit 規定應該從父元素繼承 white-space 屬性的值。 </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal">我們可以使用normal或pre-wrap來設定換行，下面我直接透過一個案例來示範一下，這裡我本地用的是蟬知建站系統的商城功能，預設效果如下：</p>
<p class="MsoNormal" style="text-align: center;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/194/6979009b08382c56710359c426836286-0.png" class="lazy" alt=""></p>
<p class="MsoNormal">因為標題太長，後面的被忽略隱藏了。現在我想讓標題顯示完整併自動換行，價格在標題下方顯示。我們在後台產品區塊的CSS框裡直接透過CSS代碼控制樣式：</p>
<p class="MsoNormal"> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>#blockID p.card-heading span
{
    width: 100% !important;
    float: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

登入後複製

 

## 

#最後我們來看下最終效果及客戶案例：

#

以上是span標籤裡如何設定自動換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！