精华内容
下载资源
问答
  • css 文本超出省略号

    千次阅读 2019-02-22 15:55:40
    段落文字不超出几行,超出部分以省略号显示 一、div内显示一行,超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div内显示两行或三行,超出部分用省略号显示 ...

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

    一、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:只能在半角空格或连字符处换行

     

    展开全文
  • p标签单行或多行超出显示省略号

    千次阅读 2019-03-21 16:54:11
    单行省略 // 单行显示省略号 p { overflow: hidden; text-overflow:ellipsis;... 表示超出3行显示省略号,以此类推 // 多行显示省略号,数字3为超出3行显示, p { display: -webkit-box; -webkit-box-ori...

    单行省略

    // 单行显示省略号
    p {
    	overflow: hidden;
    	text-overflow:ellipsis;
    	white-space: nowrap;
    }
    

    多行省略

    -webkit-line-clamp: 3; 表示超出3行显示省略号,以此类推

    // 多行显示省略号,数字3为超出3行显示,
    p {
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 3;
    	overflow: hidden;
    }
    

    效果展示

    单行:

    在这里插入图片描述

    多行:

    在这里插入图片描述

    展开全文
  • 正常情况下,单行文本指定长度,超出省略号提示的代码是: width: 100px; // 指定长度 overflow: hidden; // 隐藏 text-overflow: ellipsis; // 省略号 white-space: nowrap; // 不换行 多行文本指定行数超出省略号...

    正常情况下,单行文本指定长度,超出省略号提示的代码是:

    width: 100px;   // 指定长度
    overflow: hidden;   // 隐藏
    text-overflow: ellipsis;  // 省略号
    white-space: nowrap;  // 不换行
    

    多行文本指定行数超出省略号隐藏:

    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;  // 2行
    word-break: break-all;  // 换行
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 90%;
    

    但是要是多个div 要统一高度的话,需要加

    height: 20px;
    

    这个时候不同手机会出现溢出情况,这里的00应该隐藏,却在部分手机出现

    此时,只要加一个line-height就可搞定,多少行就多少倍

    line-height: 10px; // 2行,总高20px
    

    没有溢出
    在这里插入图片描述

    展开全文
  • 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 但是...

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
    实现方法:

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

    在这里插入图片描述
    但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
    接下来重点说一说多行文本溢出显示省略号,如下:
    实现方法:

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    

    在这里插入图片描述
    适用范围:
    因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

    注:

    1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
    2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
    3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

    实现方法:

    p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
    p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
    }
    

    在这里插入图片描述
    适用范围:
    该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

    注:

    1. 将height设置为line-height的整数倍,防止超出的文字露出。
    2. 给p::after添加渐变背景可避免文字只显示一半。
    3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:…);兼容ie8需要将::after替换成:after。

    原文地址:http://www.daqianduan.com/6179.html

    展开全文
  • 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览。css实现方法:htmloverflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果...
  • 1、P标签: 块级标签 居中方式:height=line-height 文字超出省略: p{ width:100px overflow:hidden; text-overflow:ellipsis; //加省略号 white-space:nowrap; //强制不换行 } text-overflow: clip ...
  • 超出文本显示省略号

    2017-04-10 09:13:00
    对于大多数刚入门的程序员,都是不是太注重代码的细节,也就是写出来的代码...下面我就给大家介绍一种超出文本显示用省略号代替的一种方法。 <!DOCTYPE html> <html lang="en"> <head> &...
  • html文本超出省略号

    2019-10-04 22:31:12
    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow:hidden; text-overflow:ellipsis; white-space:nowrap; ...
  • 超出文本溢出省略号

    2019-05-08 11:30:55
    方法一:超出一行省略 // A code block .text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 方法二:超出多行省略(设置行数) // A code block .text{ overflow: hidden; text-...
  • 显示省略号 说明 text-overflow: ellipsis/clip; clip:不显示省略号(…),而是简单的剪切; ellipsis:当对象文本溢出时,显示省略标记; 方法一: 要实现单行文本溢出时是否显示省略标记的效果需要定义: 1.容器...
  • 单行文本溢出显示省略号overflow: hidden; text-overflow:ellipsis; white-space: nowrap;多行文本显示省略号display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;...
  • 多行文本超出显示为省略号的需求,仅仅用html和css很难满足需求了,可以借助js实现,看案例: <style>  .text-overflow{  width:400px;  line-height:20px; } </style> <...
  • overflow : hidden; text-overflow: ellipsis; display: -webkit-box;...-webkit-line-clamp: 2;...-webkit-box-orient: ...https://www.mk2048.com/blog/blog.php?id=hc2jkaa&title=react实现多行文本超出省略号
  • 前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。 单行文本省略 .ellipsis-line { border: 1px solid #f70505...
  • 参考链接:...单行文本超出 width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:inline-block; 多行文本超出 display: -webkit-box; -webk...
  • 1.块级元素使用 p{ overflow: hidden;... //显示省略符号来代表被修剪的文本 white-space: nowrap;//规定段落中文本不进行换行 width: } 2.行内元素使用 p span{ overflow: h...
  • 单行文本溢出显示省略号 width:**px;//设置单行文本宽度 overflow:hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本显示省略号 width:**px;//设置文本宽度 display: -webkit-box; -webkit-box-...
  • css文本超出隐藏显示省略号 p style=“width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;”> 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,...
  • //正确 display:inline-block //错误,b标签里的字超出不能显示省略号(...) } //一行 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; //两行 text-overflow: -o-...
  • 单行 p { overflow: hidden;...// 多行显示省略号,数字3为超出3行显示, p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 看完请赏个赞 ...
  • 前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。 单行文本省略 .ellipsis-line { border: 1px solid #f70505; ...
  • refs: ...1.控制文本长度,超出省略号 在模版中: &lt;label&gt;{{item.abbr| cut:true:20:' ...' }}&lt;label&gt; js: angular.module('app').filter('textLengthSet', functi...
  • css 文本两行显示,超出省略号表示 重点:text-overflow: ellipsis;只对display:inline;起作用 例子: 我说说打瞌睡党风建设打火机说说色儿 a{ display:block/inline-block; width:100px; overflow: hidden; white...
  • 1.单行文本 使用text-overflow:ellipsis...ellipsis:显示省略符号来代表被修剪的文本。 string:使用给定的字符串来代表被修剪的文本。 示例: css: p{ overflow: hidden;/*超出部分隐藏*/ text-overflow:elli...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,141
精华内容 2,856
关键字:

p标签文本超出省略号