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. 关于json格式字符串解析并用mybatis存入数据库

    园子里面找了很多关于json解析后存入数据库的方法,不是太乱,就是没有写完,我下面的主题代码多是受下面两位的启发,请按顺序查看 http://www.cnblogs.com/tian830937/p/ ...

  2. webpack extract-text-webpack-plugin

    备注:  提炼上面引用的css   1. 插件配置 const path = require("path"); const extracttextplugin = require( ...

  3. 理解AI的角度

    <经济学人>去年出了一期很经典的封面,封面里将全球各大高科技平台企业如谷歌.亚马逊之许描绘成正在采油的钻井,寓意很明显,在数字经济时代,大平台正在开采数字化的石油——大数据,而开采出来的大 ...

  4. cocos2d

    http://www.jetbrains.com/webstorm/download/index.html 运行又有下面错误 Fatal signal 11 (SIGSEGV) at 0x000000 ...

  5. 常见企业IT支撑【5、内网DNS cache轻量服务dnsmasq】

    可参考http://www.centoscn.com/CentosServer/dns/2014/0113/2355.html 布署keepalive高可用方式 此方案只适合小型企业,规模少的情况下使 ...

  6. mstsc遇到CredSSP加密Oracle修正

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\P ...

  7. HTML5的LocalStorage和sessionStorage的使用

    本文转载自:http://www.cnblogs.com/qiutianlidehanxing-blog/p/5953746.html html5中的Web Storage包括了两种存储方式:sess ...

  8. Java程序员之JS(一) 入门

    背景:使用了JS做一个 WEB 项目之后,一直有使用JS 的一个功能,突然某一天项目重新规划,开始自己手动写一些原始JS,情况不妙,原来之前一直是用同事搭建好的框架在开发,对 JS 零基础的我一直在 ...

  9. HBase之五：hbase的region分区

    一.Region 概念 Region是表获取和分布的基本元素,由每个列族的一个Store组成.对象层级图如下: Table (HBase table) Region (Regions for the ...

  10. Nginx启停

    启动nginx /usr/local/nginx/nginx #不指定配置文件地址/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx. ...