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 class="MsoNormal"> </p><p class="MsoNormal"> </p><p class="MsoNormal">我們可以使用normal或pre-wrap來設定換行，下面我直接透過一個案例來示範一下，這裡我本地用的是蟬知建站系統的商城功能，預設效果如下：</p><p class="MsoNormal" style="text-align: center;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/194/6979009b08382c56710359c426836286-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p class="MsoNormal">因為標題太長，後面的被忽略隱藏了。現在我想讓標題顯示完整併自動換行，價格在標題下方顯示。我們在後台產品區塊的CSS框裡直接透過CSS代碼控制樣式：</p><p class="MsoNormal"> </p><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中文網其他相關文章！