1. div{
  2.     max-width: 500px;
  3.     text-overflow: ellipsis;
  4.     overflow: hidden;
  5.     white-space: nowrap;/*文本不换行*/
  6. }

如上代码所示，限制文段宽度，可用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. {Reship}{Emgu}{vs2010}C#配置Emgu

    =============================================================================================This Ar ...

  2. 关于fflush、缓冲区、scanf、EOF等问题真麻烦

    1.为什么 fflush(stdin)是错的 http://u637.springnote.com/pages/6288463.xhtml(已经bad request了) 首先请看以下程序: #inc ...

  3. PAT 1006 换个格式输出 C语言

    让我们用字母B来表示“百”.字母S表示“十”,用“12...n”来表示个位数字n(<10),换个格式来输出任一个不超过3位的正整数.例如234应该被输出为BBSSS1234,因为它有2个“百”. ...

  4. 笔记：服务器压缩方案 来源于 Accept-Encoding: gzip, deflate 问题

    笔记:服务器压缩方案 来源于 Accept-Encoding: gzip, deflate 问题 事情起因:odoo demo 没有启动web 压缩 目前流行的 web 压缩技术 gzip br 支持 ...

  5. Appium+python自动化27-等待activity出现(android特有的wait_activity)

    前言 在启动app的时候,如果直接做下一步点击操作,经常会报错,于是我们会在启动完成的时候加sleep. 那么问题来了,这个sleep时间到底设置多少合适呢?设置长了,就浪费时间,设置短了,就会找不到 ...

  6. 利用nginx_push_stream_module实现服务器消息推送

    NGiNX_HTTP_Push_Module 是一个 Nginx 的扩展模块,它实现了 HTTP Push 和Comet server的功能.HTTP Push 被经常用在网页上主动推的技术,例如一些 ...

  7. eclipse插件-easy explore

    最近找到一个Eclipse的插件,名字是Easy Explore,是Easy Structs 其 中的一个部分.主要的功能就是在Eclipse里面视图的部分如果看到自己的工程,或者Package,包什 ...

  8. .NET单点登录实现方法----两种

    第一种模式:同一顶级域名下cookie共享,代码如下 HttpCookie cookies = new HttpCookie("Token"); cookies.Expires = ...

  9. python调试方法

    之前调试python程序都是用print参数,感觉有点弱爆啊,最近发现python也有类似C语言gdb的工具pdb,记录下pdb的使用方法和心得. 先找了段简单的测试程序: 复制代码 !/usr/bi ...

  10. Druid.io系列（一）：简介

    原文链接: https://blog.csdn.net/njpjsoftdev/article/details/52955676 Druid.io(以下简称Druid)是面向海量数据的.用于实时查询与 ...