資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML/CSS 實現文字環繞效果？
利用 CSS 的 word-wrap 屬性，可以將較長的單詞拆分並換行。當一個不可斷開的字串超出包含框的長度時，此功能用於避免溢位。
此屬性指定當單詞過長而無法容納在容器中時，應該在哪裡斷開，從而防止溢位。當內容超出容器邊界時，它指定了單詞應該如何斷開。
語法
以下是文字環繞的語法
word-wrap: normal | break-word | initial l inherit ;
為了更好地理解如何使用 HTML/CSS 實現文字環繞效果，讓我們來看以下示例
示例
在以下示例中，我們使用 `` 標籤在上傳的影像周圍建立文字環繞。
<!DOCTYPE html>
<html>
<body>
<style>
body {
margin: 20px;
text-align: center;
background-color:#D5F5E3 ;
}
img {
float: left;
margin: 5px;
}
p {
text-align: justify;
font-size: 25px;
}
</style>
<div class="square">
<div>
<img src="https://tutorialspoint.tw/images/logo.png" alt="Logo">
</div>
<p>
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and
elated by the response it generated, we worked our way to adding
fresh tutorials to our repository which now proudly flaunts a wealth
of tutorials and allied articles on topics ranging from programming
languages to web designing to academics and much more.
</p>
</div>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個影像以及圍繞它並顯示在網頁上的文字。
示例
執行以下程式碼，觀察文字環繞與不使用文字環繞的文字相比如何工作。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
width: 200px;
background-color: #E8DAEF;
border: 2px solid black;
padding: 10px;
font-size: 20px;
}
.tutorial1 {
width: 11em;
background-color: #E9F7EF;
border: 2px solid black;
padding: 10px;
word-wrap: break-word;
font-size: 20px;
}
</style>
<h1> Without text-wrapping</h1>
<p class="tutorial"> Mahendra Singh Dhoni is an Indian former
international cricketer who was captain of the Indian national
cricket team....................................!!!!! </p>
<h1> Using text-wrapping</h1>
<p class="tutorial1"> Mahendra Singh Dhoni is an Indian former
international cricketer who was captain of the Indian national
cricket team....................................!!!!! </p>
</body>
</html>
執行上述指令碼後，將出現輸出視窗，在網頁上顯示兩種型別的文字：一種不使用文字環繞，另一種使用文字環繞。
示例
考慮以下示例，我們位於輸入欄位中，並在其中放置帶有文字環繞的文字。
<!DOCTYPE html>
<html>
<body>
<style>
#tutorial {
word-wrap: break-word;
word-break: break-all;
height: 80px;
}
</style>
<input type="text" id="tutorial" value="Tutorials Point originated
from the idea that there exists a class of readers who respond better
to online content and prefer to learn new skills at their own pace from
the comforts of their drawing rooms." />
</body>
</html>
執行上述指令碼後，將彈出輸出視窗，在網頁上顯示輸入欄位以及其中的一些文字。
更新於： 2023年4月20日
695 次瀏覽
廣告