精华内容
下载资源
问答
  • 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:只能在半角空格或连字符处换行

     

    展开全文
  • //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
  • CSS文字超出省略号无效

    千次阅读 2018-11-08 15:08:31
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 在使用上面三条属性时,文字并没有出现省略号,使用display: block;转成块状元素就可以了

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    在使用上面三条属性时,文字并没有出现省略号,使用display: block;转成块状元素就可以了

    展开全文
  • 先贴一个文字超出后显示省略号css样式: 单行文字超出显示省略号: .cont { overflow : hidden ; /*内容超出后隐藏*/ text-overflow : ellipsis ; /*超出内容显示为省略号*/ white-space : nowrap ; ...

    先贴一个文字超出后显示省略号的css样式:

    单行文字超出显示省略号:

    .cont{
    	overflow:hidden;/*内容超出后隐藏*/
    	text-overflow:ellipsis;/*超出内容显示为省略号*/
    	white-space:nowrap;/*文本不进行换行*/
    }
    

    多行文字超出显示省略号:

    .cont{
    	overflow:hidden; /*内容超出后隐藏*/
    	text-overflow:ellipsis;/*超出内容显示为省略号*/
    	display:-webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
    	-webkit-box-orient:vertical;/*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/
    	-webkit-line-clamp:2; /*这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。可根据需要设置超出多少行后显示省略号*/
    }
    

    *如果你的项目中装了 autoprefixer 管理浏览器前缀的插件的话。这个插件不仅能够帮你加 -webkit- 之类的前缀,同时还会帮你删除在 less,css,sass 中的样式 。你会发现你在less文件中写的 -webkit-box-orient: vertical; 属性不见了
    解决方法关闭 autoprefixer 自动删除

    .cont{
    	overflow:hidden; 
    	text-overflow:ellipsis;
    	display:-webkit-box; 
    	/*! autoprefixer: off */
    	-webkit-box-orient:vertical;
    	/* autoprefixer: on */
    	-webkit-line-clamp:2; 
    }
    

    加入两行注释在 -webkit-box-orient:vertical;前后,使用注释关闭autoprefixer。注意:/*! autoprefixer: off */中的!号不能省略。

    重点来了:
    博主本人用的是vant框架做的移动端开发,以上方法都加上了,但是问题仍然不能解决,加上display:-webkit-box; 反而使得溢出显示省略号的效果失效了!!! 单行省略没有影响,但是多行显示省略号就会有问题。因此,翻遍资料和博客找到如下解决方案:


    点击进入参考原文地址

    网上给的说法都是直接加上面的,而在移动端,需要再加上最后一行代码。

    .cont{
    	overflow:hidden; 
    	text-overflow:ellipsis;
    	display:-webkit-box; 
    	/*! autoprefixer: off */
    	-webkit-box-orient:vertical;
    	/* autoprefixer: on */
    	-webkit-line-clamp:2; 
    	word-break:break-all;/*追加这一行代码*/
    }
    

    追加代码后,问题解决!


    至此,问题解决。

    展开全文
  • 布局两栏布局,左边定宽,右边 flex-grow: 1,自动填满剩余空间。image.png{{book.name}}{{book....因此 .name 总有足够的宽度在一行内显示所有文本,也就不能触发截断省略的效果。SCSS.book-box {display: flex;.b...

    布局

    两栏布局,左边定宽,右边 flex-grow: 1,自动填满剩余空间。

    e6b70b71639c

    image.png

    {{book.name}}

    {{book.author}}

    给 book-info 设置width: 0

    如果不设置宽度, .book-info 可以被子节点无限撑开;因此 .name 总有足够的宽度在一行内显示所有文本,也就不能触发截断省略的效果。

    SCSS

    .book-box {

    display: flex;

    .book-img {

    width: 160rpx;

    height: 220rpx;

    margin-right: 40rpx;

    image {

    width: 160rpx;

    height: 220rpx;

    }

    }

    .book-info {

    flex-grow: 1;

    width: 0;

    view {

    margin-bottom: 8rpx;

    white-space: nowrap; /* 规定文本是否折行 */

    overflow: hidden; /* 规定超出内容宽度的元素隐藏 */

    text-overflow: ellipsis;

    }

    }

    }

    展开全文
  • 在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号文本不换行 具体css代码为: 复制代码代码如下:.title{...
  • 下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览。css实现方法:htmloverflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果...
  • white-space:nowrap;不换行 overflow:hidden;//内容超出隐藏 text-overflow:ellipsis;显示省略号 前提设置文字盒子的宽度
  • 关于css文字超出显示省略号失效

    千次阅读 2019-05-21 13:38:25
    只需要加上 white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //只显示两行 overflow: hidden;.../* autoprefixer: off */ ...产生的原因是autoprefixer自动移除老...
  • 列表由于标题过长而影响美观度,所以想让标题溢出的文字省略号方式表现.此类文章网上会有很多,本文整理了一些经验技巧与大家共同分享,感兴趣的你可不要错过了哈,希望可以帮助到你
  • 文字超出省略号显示 单行 width:100px; overflow: hidden;/*文字超出隐藏*/ text-overflow: ellipsis;/*文字超出省略号显示*/ white-space: nowrap;/*不换行*/ 多行 display: -webkit-box;/*自适应*/ overflow: ...
  • 宽度为百分比,随浏览器变化而变化,当窗口变小到一定程度,文字超出部分用省略号代替,当文字出现省略号,需要鼠标悬停时显示全部文本文字超出部分用省略号代替 width: overflow: hidden;  text-overflow: ...
  • css 文本超出显示省略号不起作用

    千次阅读 2020-07-16 09:04:37
    一、单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二、多行文本显示省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; ...
  • css控制文本超出显示省略号结合flex布局 本文只作为本人遇到相同问题时的查询,若有不足请指出。 本文遇到的情况 html代码 <div class="p"> <div class="p1"><span>xxxxxxx</span></div...
  • .item-name {letter-spacing: ;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: ; /*要显示的行数*/-webkit-box-orient: ...}css超出部分显示…单行超出部分显示…overflow: hi...
  • CSS实现文本超出区域换省略号

    千次阅读 2020-06-20 17:49:31
    CSS实现文本超出区域换省略号单行文本多行文本 单行文本 .single-box { width: 100px; /*设置超出部分隐藏*/ overflow: hidden; /*设置内容不换行*/ white-space: nowrap; /*设置超出部分变省略号*/ text-...
  • 微信小程序 文本超出显示省略号 css

    千次阅读 2019-04-22 17:07:35
    文本超出显示省略号 css 1.单行 overflow:hidden; //超出隐藏 text-overflow:ellipsis; //溢出显示用省略号 white-space:nowrap; //溢出不换行 2.多行 overflow: hidden;//超出隐藏 text-overflow: ellipsis...
  • HTML+css 超出字符省略号表示,其中包括了HTML代码和CSS样式
  • css文本超出省略号

    2020-07-13 14:44:57
    单行超出 (记得设置宽度) overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行后超出 (记得设置高度) display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; ...
  • 之前做过好过网页,其中经常遇到一个常用的知识点,就是当文字超出界面的范围,用省略号代替显示,给网页一美观。 解决方案 1.单行显示省略号: 点击查看代码详情 效果如下: 2.多行显示省略号: 点击查看...
  • 好像以前分享过几款代码了,但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错,当文字或字符超出外层Div的时候,自动隐藏并添加省略号,对前端开发来说,这是个相当不错的CSS特效吧...
  • float 特性实现多行文本截断 基本原理 有个三个盒子 div,粉色盒子左浮动,浅蓝色盒子和黄色盒子右浮动, 当浅蓝色盒子的高度低于粉色盒子,黄色盒子仍会处于浅蓝色盒子右下方。 如果浅蓝色盒子文本过多,高度超过...
  • 1. 单行固定宽度,文字超出部分用省略号代替。 .box-text{ /* 下方四项配合使用,超出范围的显示... */ width: 400rpx; overflow: hidden; /*隐藏*/ white-space: nowrap; /*不换行*/ text-overflow: ellipsis;...
  • css文本超出长度用省略号显示

    千次阅读 2017-11-09 16:11:00
    当我们制作列表页的时候,一般都是获取文章标题,然后一行一行的显示。 但是当标题过长的时候,就会造成换行显示。 虽然我们可以使用overflow:...今天小编带来的就是,使用css让单行文本超出长度的部分用省略号
  • css 文本超出2行就隐藏并且显示省略号

    万次阅读 多人点赞 2016-05-26 18:12:26
    今天做东西,遇到了这个问题,百度后总结得到了这... //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性,需要记得。 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?
  • <div id="box"> <p class="text">滚动位置滚动位置滚动位置滚动位置滚动位置滚动位置滚动位置</p> <span class="more">显示更多</span> </div> ... }..
  • 对于一行: ... // 超出部分用省略号代替,或者 clip 直接裁剪 white-space: nowrap; // 文本不换行 对于两行: overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 用省略号代替 display: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,812
精华内容 4,724
关键字:

css文本超出省略号