css 文本超出省略号

段落文字不超出几行，超出部分以省略号显示

一、div内显示一行，超出部分用省略号显示

white-space: nowrap;//强制一行显示
overflow: hidden;//超出的隐藏
text-overflow: ellipsis;//省略号

二、div内显示两行或三行，超出部分用省略号显示

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;（行数）
/*! autoprefixer: off */（在实际项目中，我们会发现-webkit-box-orient没有生效，需要加入这个注释）
-webkit-box-orient: vertical;

概述

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。 text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。

强制换行符号（br）换行

可以使用标签p来实现大换行，如果在一个文章里需要分段换行形式。

使用CSS设置宽度自动换行

连续数字或者字母换行white-space:normal; word-break:break-all;

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

word-wrap: normal|break-word;
word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行

word-break: normal|break-all|keep-all;
word-break 属性用来标明怎么样进行单词内的断句。
normal：使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行

css 文本超出省略号相关推荐

css文本超出省略号
单行超出 (记得设置宽度) overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行后超出 (记得设置高度) display ...
CSS文本超出显示省略号
CSS文本超出显示省略号 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
css 文本溢出省略号样式
css 文本溢出省略号样式单行文本超出显示省略号样式 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
css文本显示省略号
css文本显示省略号 // 单行显示省略号 .text-ellipsis {max-width: 100%;white-space: nowrap;overflow: hidden;text-over ...
CSS 文本超出两行显示省略号
// 文本超出两行显示省略号注:如果设置了弹性布局 display:flex; 那么下面的的css设置将不起作用div {width: 300px; overflow:hidden;text-ov ...
css 文本超出显示省略号不起作用
一.单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二.多行文本显示省略号 overflow : h ...
前端css 文本超出就隐藏并且显示省略号
目录文本超出加省略号单行文本溢出显示省略号多行文本超出隐藏单词超出加省略号单行单词溢出显示省略号多行单词溢出显示省略号跨浏览器兼容的方案表格中单行超出隐藏文本超出加省略 ...
css小经验：转载 - CSS文本溢出省略号：text-overflow:ellipsis
(转载: http://blog.163.com/yinwei_666/blog/static/2036157320101113102733794/) 很多时候,比如网站最基本的文章列表,标题会很长, ...
css文本超出隐藏显示三个点
文本超出显示三个点一般分两种情况一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...

css 文本超出省略号

css 文本超出省略号相关推荐

最新文章

热门文章