CSS中設置阻止換行可以讓文本在頁面上顯示時不自動換行,這在部分需要保持排版格式的內容中十分有用。
/* 阻止元素內文本自動換行 */ .no-wrap { white-space: nowrap; }
在CSS中,我們可以使用white-space
屬性來控制文字的換行情況。其中,nowrap
可以阻止元素內文本自動換行。
使用該屬性的元素可以是任何塊級元素,在實際運用時建議配合展示代碼等需要精準格式的內容。
<div class="no-wrap"> <p>This is a long long long long long long long long text.</p> </div>
在上述代碼中,<div>
元素的class屬性被設置為.no-wrap
,將該元素內的文本阻止自動換行。需要注意的是,該屬性只對英文單詞或是空格進行識別。
以數組或長字符串等情況下,我們可以使用<pre>
標簽來防止文字自動換行,同時避免無法保持格式。該標簽在HTML5中的定義是“預定義的格式化文本,通常用于顯示計算機源代碼”。
<pre class="no-wrap"> var array = ['Apple', 'Banana', 'Cherry']; console.log(array.join(', ')); </pre>
通過在<pre>
標簽內部對文本排版格式進行設置,就可以保持精準布局了。
上一篇記事本如何開發css
下一篇設置css表格居中對齊