html5文字如何強制不換行

這篇“html5文字如何強制不換行”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“html5文字如何強制不換行”文章吧。

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站設計、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的南京網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

在html5中，可以利用style屬性配合“white-space”屬性來設置文字強制不換行；style屬性用于設置元素的樣式，“white-space”屬性用于指定元素內的空白怎么處理，當“white-space”屬性值被設置為nowrap時，文本就不會換行，直到遇到“<br>”標簽，語法為“<element style="white-space:nowrap">”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

html5文字強制不換行

white-space屬性指定元素內的空白怎樣處理。

  • normal 默認?？瞻讜粸g覽器忽略。

  • pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。

  • nowrap 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標簽為止。

  • pre-wrap 保留空白符序列，但是正常地進行換行。

  • pre-line 合并空白符序列，但是保留換行符。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
div{
width: 120px;
height: 60px;
line-height: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="white-space:nowrap">
This is some text. This is some text.
</div>
<div>
This is some text. This is some text.
</div>
</body>
</html>

輸出結果：

html5文字如何強制不換行

以上就是關于“html5文字如何強制不換行”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網站題目：html5文字如何強制不換行
文章URL：http://bm7419.com/article30/igsgso.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網站、建站公司、標簽優(yōu)化、做網站、動態(tài)網站、網站收錄

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都網站建設公司