css td文字不換行如何實現

css td文字不換行的實作方法：先開啟對應的css程式碼；然後為表格table與td標籤設定「white-space:nowrap;」樣式即可使表格內文字不換行。

本教學操作環境：Dell G3電腦、Windows7系統、HTML5&&CSS3版本。

css表格文字不換行的設定

很多時候，我們在專案開發中會出現，儲存格內容由於太多導致的換行問題，讓表格顯得非常的醜陋。下面我們來看看使用css設定表格內文字不換行的方法。

 

 

css可以透過為表格table與td標籤設定white-space:nowrap;樣式使表格內文字不換行。

程式碼如下：

/*让单元格内容过多时也不换行*/
#datasTablediv table td{
white-space: nowrap;
}

 

white-space 屬性設定如何處理元素內的空白。

這個屬性宣告建立佈局過程中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 css 2.1 中新增的。

屬性值：

normal 預設。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 html 中的

 標籤。 </p><p>nowrap 文字不會換行，文字會在同一行上繼續，直到遇到 <br> 標籤為止。 </p><p>pre-wrap 保留空格符序列，但正常地進行換行。 </p><p>pre-line 合併空白符號序列，但保留換行符。 </p><p>inherit 規定應該從父元素繼承 white-space 屬性的值。 </p><p>範例：</p><p>css程式碼：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table {
    border : 1px solid red;
}
 
td {
    white-space:nowrap;
    text-overflow:ellipsis;
    width:50px;
    overflow:hidden;    
    display: block;
}

登入後複製

html程式碼：

<table>
    <tr><td>此处文本超过设定的宽度</td></tr>
</table>

推薦：《css影片教學》

以上是css td文字不換行如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！