CSS3文字与字体 text-overflow 与 word-wrap，十天精通CSS3教程-慕课网

CSS3文字与字体 text-overflow 与 word-wrap

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

语法：

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

语法：

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

任务

在右侧代码编辑器窗口的第8行，输入正确内容使文字溢出时显示为省略号。

?不会了怎么办: ellipsis是否拼写正确？

问答
评论
笔记
代码

全部精华我要发布

word-wrap怎么用

最赞回答 / 帝国大学

<...code...>word-wrap的用法

1 回答 686 浏览

2024-01-10

如果想规定超过多少个字就出现省略号怎么办呢？

最新回答 / 慕标2558925

.line-limit-length { /* 1.文字不换行 */ white-space: nowrap; /* 2.溢出的部分隐藏 */ overflow: hidden; /* 3.文字溢出的时候用省略号来显示 */ text-overflow: ellipsis;}你可以补充一个width进去，就可以控制超出文字就出现省略号

1 回答 663 浏览

2022-06-08

是默认多少字节换行还是可以设置的

最新回答 / qq_慕仔7565087

和文本的大小还有容器的大小有关吧

1 回答 657 浏览

2022-05-19

多行的如何实现省略呢？

最新回答 / qq_慕前端3499027

text-overflow:ellipsis

3 回答 1932 浏览

2021-07-10

请教各位，我想查看省略号里的内容要怎么设置呢？

最新回答 / weixin_慕仙0575493

<div class="test_demo" title="超酷的IT技术学习平台（我是省略号）"> 超酷的IT技术学习平台（我是省略号）可以增加title属性，鼠标滑动时能看到全部文字

6 回答 1995 浏览

2020-06-08

我想鼠标移动到省略处后能完整显示省略的内容，应该怎么做？

最赞回答 / hhxxttxsyf

.test_demo:hover { width:auto; }

6 回答 2185 浏览

2018-08-14

怎么使一整段话的末尾处省略

已采纳回答 / 白骨第

webkit的一个方法是规定几行文字，超出部分省略号overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;

1 回答 1042 浏览

2017-05-04

如果我想实现能够浏览省略号后面的内容该怎么办呢？

+ 我来回答回答最高可+2积分

3 回答 1212 浏览

2021-07-10

这是怎么用的？

已采纳回答 / samuel37

文字超出显示范围时截掉，使用前提是要确定文本元素固定宽度，且overflow: hidden; white-space: nowrap;

1 回答 866 浏览

2016-08-23

word-wrap作用是什么没有怎么搞明白？

已采纳回答 / 坑坑

让它不换行

4 回答 2144 浏览

2018-10-16

word-wrap该如何使用

最赞回答 / 呵呵呵啦啦啦

能设置或检索当当前行超过指定容器的边界时是否断开转行，是一个指令代码。当word-wrap:normal时，超长的英文长度大于box的宽度时会撑破box伸展到box外（除IE6以及IE6以下版本之外），因为normal是其默认值。当word-wrap值为break-word时，超长英文大于box的宽度时，其碰到box边缘会自动折行显示。

2 回答 1486 浏览

2016-08-23