1 单行文本过长打点

只有1行文本时，需要满足如下条件：

文本需要有宽度。当设置了宽度时，文本过长才会超出该宽度，所以文本的元素应该是块级元素（行内元素宽度、高度都会失效）。
不换行显示。单行文本无需换行。
超出部分隐藏。文本超出宽度的部分，需要隐藏显示。
文本超出打点。

示例代码：

<div>超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本</div>
<style>div {/* 设置宽度，如果文本内容长短不一，可以设置max-width最大宽度显示，小于最大宽度不会打点 */width: 200px;/* 文本不会换行显示 */white-space: nowrap;/* 超出盒子部分隐藏 */overflow: hidden;/* 文本超出的部分打点显示 */text-overflow: ellipsis;}
</style>

2 多行文本打点显示

示例代码：

<div>超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本超长文本</div>
<style>div {/* 设置宽度原因：让文本宽度超过200px时换行显示 */width: 200px;/* 不同浏览器有不同的前缀，比如-moz-box */display: -webkit-box;/* 子元素的排列方式：垂直排列 */-webkit-box-orient: vertical;/* 设置3行文本之后打点显示 */-webkit-line-clamp: 3;/* 超出盒子部分隐藏显示 */overflow: hidden;}
</style>

3 涉及的属性

3.1 white-space

white-space属性是用来设置如何处理元素中的空白，其属性值如下所示：

属性值	说明
`normal`	默认属性，多个空白连续符会被合并成1个显示
`nowrap`	多个连续空白符会合并成1个显示，文本不会换行，直到遇到`<br/>`为止
`pre`	多个连续空白会被保留，文本不会换行，直到遇到`<br/>`为止
`pre-wrap`	多个连续空白会被保留，会自动换行
`pre-line`	多个连续空白符会合并成1个显示，会自动换行

3.2 text-overflow

text-overflow属性用来确定如何提示隐藏的溢出内容，其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串，其属性值如下：

属性值	说明
`clip`	默认值，在内容区的极限处截断文本
`ellipsis`	在内容区的极限处以省略号（…）来显示
`<string>`	使用给定的字符串来代替被修剪的文本（只在firefox浏览器有效）

text-overflow属性并不会强制溢出，所以需要搭配额外的属性：overflow和white-space，例如：

white-space: nowrap;
overflow: hidden;

CSS控制文本超出打点显示相关推荐

css控制文本超出省略（单行、两行、多行）
想要控制文本长度? 想要文本超出隐藏? 还想要不用JavaScript实现? 让我们来用css试试吧~ 本文重点 css控制文本超出省略.完成单行.两行.多行的效果注意点本文提到的方法都需要控制 ...
CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本 HTML代码如下: <pclass="ellipsis1"title="单行文本,超出隐 ...
html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种. 测试浏览器: IE6/7/8/9.ope ...
css控制文本超出省略...
单行文本操作省略 /**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/display: inline-block;whit ...
css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
css 控制段落超出三行的部分显示...
css 控制段落超出三行的部分显示- 代码如下 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml&quo ...
CSS 文本超出两行显示省略号
// 文本超出两行显示省略号注:如果设置了弹性布局 display:flex; 那么下面的的css设置将不起作用div {width: 300px; overflow:hidden;text-ov ...
文本超出部分显示省略号
我们经常在网站上可以看到以下样式,标题太长,一行显示不下,则会使用省略号来代替.但是事实上,这个省略号并不是打字打上去的,而是使用代码表示出来的. 今天则主要介绍如何让文本超出部分显示省略号. 1.单 ...
CSS中文本超出部分隐藏并用省略号代替
CSS中文本超出部分隐藏并用省略号代替这种在开发过程中经常遇到,这种只需要css三行代码就可以实现首先先写好基本的结构 <div> <p>今天天气很好,适合出去玩耍,不要再打 ...

CSS控制文本超出打点显示