css:

.box{

    width: 100px;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}

white-space: 不换行。强制在一行显示。

text-overflow: 处理溢出的文本： 以省略号代替。

1

css处理文本溢出的更多相关文章

  1. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  2. css基础 -文本溢出 text-overflow:ellipsis;

    .className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...

  3. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  4. css实现文本溢出用...显示

    文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...

  5. css实现文本溢出显示...

    在网页中显示文字内容时,经常会碰到文字内容特别长的情况,那么这个时候为了使网页看起来比较美观和简洁,会对内容进行处理.下面我们就来看一看,如何使用css来对文字溢出部分增加.... 首先来看第一种情况 ...

  6. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  7. CSS换行文本溢出显示省略号，多行

    首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...

  8. CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  9. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

随机推荐

  1. HashMap问答

    一.什么是HashMap二.HashMap的继承关系三.HashMap数据结构四.HashMap查找.添加元素是怎样的五.什么是Hash碰撞六.HashMap是线程安全的吗?七.HashMap怎样处理 ...

  2. MySQL优化之like关键字

    1.%号不放最左边 无法使用索引了,开头是不确定的,MySQL也无法进行优化了,只能扫描表了. 2.使用覆盖索引 如果业务需要%就放开头我们也没办法,一般情况需求都是这样的,毕竟优化还是为业务服务的. ...

  3. fastjson转换json字符串key的首字母小写变大写的解决办法

    https://blog.csdn.net/erbao_2014/article/details/53688934 问题描述在开发过程中,由于接口文档的描述,要求json字符串的key首字母为大写,而 ...

  4. C# Task 是什么？返回值如何实现? Wait如何实现

    关于Task的API太多了,网上的实例也很多,现在我们来说说Task究竟是个什么东西[task一般用于多线程,它一定与线程有关],还有它的返回值有事怎么搞的. 首先我们以一个最简单的API开始,Tas ...

  5. win7下Google谷歌浏览器上传下载卡死无响应

    问题背景:win7,谷歌浏览器上传选择图片之后,页面卡死无响应. 以前解决过类似问题就是input type="file"的accept属性当为通配符时,会出现这种情况,改为具体的 ...

  6. [Vuex] Use Namespaces in Vuex Stores using TypeScript

    Even by using modules, they still share the same namespace. So you couldn’t have the same mutation n ...

  7. C#读取Excel文件的简单方法

    一.简述 本文讲C#通过第三方库读取Excel的最简单的方法,下文给一个读取行数的例子. 二.依赖 引入nuget.org包如下: <?xml version="1.0" e ...

  8. 天府大讲堂：5G时代的物联网发展趋势与产业变革

    摘要:国家973物联网首席科学家,中科院上海微系统与信息技术研究所副所长,无锡物联网产业研究院院长刘海涛教授讲授的5G时代的物联网发展趋势与产业变革意义深刻.作者根据天府大讲堂听讲内容加工整理所得,旨 ...

  9. Fiddler抓包_重定向AutoResponder

    1. 文件及图片替换(Enable rules) 目的:允许从本地返回文件,代替服务器响应,而不用将文件发布到服务器[可用正式环境验证本地文件] 步骤一:抓页面http://ir.baidu.com/ ...

  10. OpenLayers Node环境安装运行构建-支持Vue集成OpenLayers

    NodeJS 环境安装包下载:https://nodejs.org/zh-cn/download/ 安装vue-cli3.0.1: https://cli.vuejs.org/guide/instal ...