div{

    max-width: 500px;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;/*文本不换行*/

}

如上代码所示，限制文段宽度，可用width或max-width，方法简单但实用。

用css实现文本不换行切超出限制时显示省略号（小tips）的更多相关文章

  1. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  2. css实现文本两行或多行文本溢出显示省略号

    word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-b ...

  3. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  4. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  5. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  6. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. js实现多行文本超出一定字数显示省略号功能

    最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...

  8. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  9. CSS - div中的文字不换行，超出宽度就用省略号表示

    问题 过多的文字会把盒子撑开,造成布局错乱. 解决 .card-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidd ...

随机推荐

  1. 14.Python使用Pillow教程

    1.打算开始学习PIL,在命令行输入:pip3 install PIL,报错信息如下所示,后百度了下,发现:PIL仅支持到Python2.7,后来一群志愿者在此基础上创建了兼容性版本,为Pillow, ...

  2. 排序 第K大等问题总结

    在公司面试时,当场写排序比较多,虽然都是老掉牙的问题,还是要好好准备下 快速排序,以第一个元素为关键词比较,每次比较结束,关键词都会去到最终位置上 //7 3 2 9 8 3 4 6 //7 3 2 ...

  3. xunsearch之php索引维护（四）

    1.添加文档 $xs = new XS('njw'); $index = $xs->index; $data = array( 'pid' => 234, // 此字段为主键,必须指定 ' ...

  4. Asp.net Mvc 过滤器执行顺序

    Asp.net Mvc 过滤器执行顺序: IAuthorizationFilter(OnAuthorization)----->IActionFilter(OnActionExecuting)- ...

  5. 确保nginx安全的10个技巧

    Nginx是当今最流行的Web服务器之一.它为世界上7%的web流量提供服务而且正在以惊人的速度增长.它是个让人惊奇的服务器,我愿意部署它. 下面是一个常见安全陷阱和解决方案的列表,它可以辅助来确保你 ...

  6. QT——在QGraphicsScene中限制图元的拖动范围

    欲使QGraphicsItem可拖动,则需设置标志位:setFlag(ItemIsMovable,true); 而如果想限制QGraphicsItem对象的移动范围,需要继承QGraphicsItem ...

  7. web开发视频(一)之环境准备

    硬件环境: Win7+64位操作系统 1.安装 jdk.tomcat.eclipse; 2.配置 jdk 环境变量.tomcat环境变量 (jdk配置成功的标示是在命令提示符中输入 javac 给出对 ...

  8. bootstrap的折叠组件1

    官网的例子: http://v3.bootcss.com/javascript/#collapse <div class="panel-group" id="acc ...

  9. ios真机连接不上记录,再次执行脚本说找不到真机的解决

    1.连接其他手机iphone 6 plus   和  iphone x 的时候,连接不上 appium desired capabilities 获取不了元素 提示 An unknown server ...

  10. Tomcat配置远程调试

    ===========方法1================================ tomcat7 :catalina.bat jpda start,调试端口默认为8000 ======== ...