CSS解决中英文的换行、不换行、超出后显示省略号的问题

white-space:nowrap; //强制不换行（中英文都起作用）

white-space:pre-wrap; //只对中文起作用，强制换行

word-break:break-all; // 只对英文起作用，以字母作为依据，强制换行

word-break:break-word; //只对英文起作用，以单词作为依据，强制换行

overflow:hidden; //超出的内容隐藏

text-overflow:ellipsis; //超出的内容为省略号

实例1：不换行，超出的内容设置成省略号（中英文）

white-space:nowrap;        //强制换行（中英文有效）
overflow:hidden;           //隐藏超出的内容
text-overflow:ellipsis;    //超出的内容设置成省略号

实例2：强制换行，英文以字母为换行依据，超出的内容设置成省略号

white-space: pre-wrap;        //中文换行
word-break:break-all;        //英文换行，以字母为依据
overflow:hidden;            //隐藏超出的内容
text-overflow:ellipsis;    //超出的内容设置成省略号

实例3：强制换行，英文以单词为换行依据，超出的内容设置成省略号

white-space:pre-wrap;        //中文换行
word-break:break-word;       //英文换行，以单词为依据
overflow:hidden;             //隐藏超出部分内容
text-overflow:ellipsis;      //超出部分设置成省略号

类似文章：CSS3指定内容以多少行显示，超出部分显示省略号

（完）

CSS解决中英文的换行、不换行、超出后显示省略号的问题相关推荐

css设置内容超出后显示省略号
在写前端页面时,通常会遇到文字超出后显示省略号: 页面本来是这个样子的,第一行的文字超出已经压倒了下面的文字, 第一步,使用overflow: hidden把超出的内容进行隐藏,页面变成了这样第二步 ...
新闻列表中，常用的文字超出后显示省略号..
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
css p 文本不换行，超出文字显示省略号
.text {// 文本强制不换行white-space: nowrap;// 文本溢出显示省略号text-overflow: ellipsis;// 溢出的部分隐藏overflow: hidden; ...
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号
css超出一行省略号:text-overflow和white-space超出隐藏显示省略号通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下 ...
关于用css实现的文字超出部分显示省略号
文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <d ...
CSS文字超出部分显示省略号
一行内超出显示省略号 overflow:hidden; /*超出的部分隐藏起来*/ text-overflow:ellipsis;/*超出文本以省略号 */ white-space:nowrap;/* ...
css超出隐藏显示省略号
width: 300px; overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap ...
html 文字过多如何显示,当页面文字过多时，怎么用css使超出部分显示省略号？（单/多行代码演示）...
当一个页面文字过于冗长时,不仅不利于用户视觉上的感受,更不利于网站内的优化.那么我们怎么使用css超出部分显示省略号代替呢?本篇文章就给大家详细介绍css超出部分显示省略号怎么实现的?希望对有需要的朋 ...
CSS 文本超出两行显示省略号
// 文本超出两行显示省略号注:如果设置了弹性布局 display:flex; 那么下面的的css设置将不起作用div {width: 300px; overflow:hidden;text-ov ...

CSS解决中英文的换行、不换行、超出后显示省略号的问题

实例1：不换行，超出的内容设置成省略号（中英文）

实例2：强制换行，英文以字母为换行依据，超出的内容设置成省略号

实例3：强制换行，英文以单词为换行依据，超出的内容设置成省略号

CSS解决中英文的换行、不换行、超出后显示省略号的问题相关推荐

最新文章

热门文章