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选项来声明响应式的数据。
炉石传说绝望线缕属性介绍
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> &
CSS中bottom属性语法
Feb 21, 2024 pm 03:30 PM
CSS中bottom属性语法及代码示例在CSS中，bottom属性用于指定一个元素与容器底部之间的距离。它可以控制一个元素相对于其父元素底部的位置。bottom属性的语法如下：element{bottom:value;}其中，element表示要应用该样式的元素，value表示要设置的bottom值。value可以是一个具体的长度值，比如像素
