word-wrap和text-overflow有什麼不同？兩種屬性詳解
在css樣式中，很多人都分不清楚兩種屬性，一種是文字溢出，另一種是文字換行，那麼word-wrap和text-overflow屬性各是什麼？下面我們來總結一下word-wrap和text-overflow屬性。
一：word-wrap強制換行屬性
在css3中，我們可以使用word-wrap屬性來確定一串長單字和url，並且是否可以換到下一行，word-wrap的取值有兩個，分別是normal和break-word，normal是表示預設的值，自動換行，第二就是設定url的長度，並且進行強制換行。
例如：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 word-wrap属性</title>
<style type="text/css">
#lvye
{
width:200px;
height:120px;
border:1px solid gray;
}
</style>
</head>
<body>
<div id="lvye">Welcome to the Chinese website, where there is endless PHP knowledge to let you roam in the sea of knowledge.http://www.php.cn/div-tutorial-275623.html</div>
</body>
</html>以上程式碼在瀏覽器中的預覽效果：
如果我們在div中加上word-wrap :break-word;就會出現強制換行，如果出現單字太長的話，就會出現超出範圍。在製作網站的時候，我們只要選擇預設的值就好。
二：text-overflow文字溢出屬性
我們在預覽網頁的時候，總是會看到這樣的現象，當我們的文字超出一定的範圍，就會以省略號的形式顯示，多餘的文字不會顯示。這樣設定其實對使用者比較好，可以幫助使用者知道更多的內容。
想要隱藏多餘的內容我們可以使用text-overflow屬性，一般text-overflow也是有兩個值，第一種情況就是當文字溢出出現省略號顯示，另外一種就是當文字溢出顯示省略號，且將溢出的部分不顯示。
text-overflow語法為：
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
前提條件是這三個條件同時顯示才能使用。
例如：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-overflow属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid gray;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="div1">php是最好的语言，欢迎大家学习交流</div>
</body>
</html>顯示效果如下：
#以上就是css中word-wrap和text-overflow屬性詳解的全部介紹，如果你想了解更多有關CSS影片教學，請關注php中文網。
以上是word-wrap和text-overflow有什麼不同？兩種屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在Python中取得整數位面量屬性而不是SyntaxError？
Aug 20, 2023 pm 07:13 PM
要獲得intliteral屬性而不是語法錯誤，請使用空格或括號。intliteral是Python中NumericLiterals的一部分。NumericLiterals還包括以下四種不同的數字類型-int（有符號整數） - 它們通常被稱為整數或整數，是正數
如何在Java中使用Gson重命名JSON的屬性？
Aug 27, 2023 pm 02:01 PM
Gson@SerializedName註解可以序列化為JSON，並將提供的名稱值作為其欄位名稱。此註解可以覆寫任何FieldNamingPolicy，包括可能已在Gson實例上設定的預設欄位命名策略。可以使用GsonBuilder類別來設定不同的命名策略。語法@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedName範例importcom.google.gson.annotations.*;
Python的dir()函數：查看物件的屬性和方法
Nov 18, 2023 pm 01:45 PM
Python的dir()函數：查看物件的屬性和方法，需要具體程式碼範例摘要：Python是一種強大而靈活的程式語言，其內建函數和工具為開發人員提供了許多方便的功能。其中一個非常有用的函數是dir()函數，它允許我們查看一個物件的屬性和方法。本文將介紹dir()函數的用法，並透過具體的程式碼範例來示範其功能和用途。正文：Python的dir()函數是一個內建函數，
Win11磁碟屬性未知怎麼辦
Jul 03, 2023 pm 04:17 PM
Win11磁碟屬性未知怎麼辦？近期Win11用戶在電腦的使用中，發現系統出現提示磁碟錯誤的情況，這是怎麼回事？而且該如何解決呢？很多小夥伴不知道怎麼詳細操作，小編下面整理了Win11磁碟出錯的解決步驟，如果你有興趣的話，跟著小編一起往下看看吧！ Win11磁碟出錯的解決步驟1、首先，按鍵盤上的Win+E組合鍵，或點選工作列上的檔案總管； 2、檔案總管的右側邊欄，找到邊右鍵點選本機磁碟（C ：），在開啟的選單項目中，選擇屬性； 3、本機磁碟（C：）屬性窗口，切換到工具選
使用Vue.set函數實作動態新增屬性的方法和範例
Jul 24, 2023 pm 07:22 PM
使用Vue.set函數實作動態新增屬性的方法和範例在Vue中，如果我們想要動態地新增一個屬性到一個已經存在的物件上，通常會使用Vue.set函數來實作。 Vue.set函數是Vue.js提供的一個全域方法，它能夠在新增屬性時保證響應式更新。本文將介紹Vue.set的使用方法，並提供一個具體的範例。首先，在Vue中，我們通常會使用data選項來宣告響應式的資料。
CSS中bottom屬性語法
Feb 21, 2024 pm 03:30 PM
CSS中bottom屬性語法及程式碼範例在CSS中，bottom屬性用於指定一個元素與容器底部之間的距離。它可以控制一個元素相對於其父元素底部的位置。 bottom屬性的語法如下：element{bottom:value;}其中，element表示要套用該樣式的元素，value表示要設定的bottom值。 value可以是一個具體的長度值，例如像素
爐石戰記絕望線縷屬性介紹
Mar 20, 2024 pm 10:36 PM
絕望線縷是暴雪娛樂旗下佳作《爐石戰記》中的一張稀有卡牌，在「威茲班的工坊」卡包中有機會獲得。可消耗100/400點奧術之塵合成普通/金色版本。爐石戰記絕望線縷屬性介紹答：在威茲班的工坊卡包中有幾率獲得，也可以透過奧術之塵合成。稀有度：稀有類型：法術職業：死亡騎士法力值：1效果：使所有隨從獲得亡語：對所有隨從造成1點傷害
pageXOffset屬性在JavaScript中的作用是什麼？
Sep 16, 2023 am 09:17 AM
如果您想要取得文件從視窗左上角捲動到的像素，請使用pageXoffset和pageYoffset屬性。對水平像素使用pageXoffset。範例您可以嘗試執行以下程式碼來了解如何在JavaScript中使用pageXOffset屬性-現場示範<!DOCTYPEhtml><html> <head> <style> &
