数据结构
网络
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.com/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 次浏览
广告