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

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

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

 

normal 預設值，空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 e03b848252eb9375d56be284e690e873 標籤。
nowrap 文字不會換行，文字會在同一行上繼續，直到遇到 0c6dc11e160d3b678d68754cc175188a 標籤為止。
pre-wrap 保留空白符序列，但正常地進行換行。
pre-line 合併空白符序列，但保留換行符號。
inherit 規定應該從父元素繼承 white-space 屬性的值。

 

 

我們可以使用normal或pre-wrap來設定換行，下面我直接透過一個案例來示範一下，這裡我本地用的是蟬知建站系統的商城功能，預設效果如下：

因為標題太長，後面的被忽略隱藏了。現在我想讓標題顯示完整併自動換行，價格在標題下方顯示。我們在後台產品區塊的CSS框裡直接透過CSS代碼控制樣式：

 

#blockID p.card-heading span
{
    width: 100% !important;
    float: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

 

## 

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

#

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