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. .NET分布式缓存Memcached从入门到实战

    一.课程介绍 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是 ...

  2. ASP.NET WebAPI数据传输安全HTTPS实战项目演练

    一.课程介绍 HTTPS是互联网 Web 大势所趋,各大网站都已陆续部署了 HTTPS .  全站HTTPS时代,加密用户与网站间的交互访问,在客户端浏览器和Web服务器之间建立安全加密通道,一般情况 ...

  3. Java知识回顾 （9） 同步、异步IO

    一.基本概念 同步和异步: 同步和异步是针对应用程序和内核的交互而言的. 同步指的是用户进程触发IO 操作并等待或者轮询的去查看IO 操作是否就绪: 而异步是指用户进程触发IO 操作以后便开始做自己的 ...

  4. 前端工程化系列[02]-Grunt构建工具的基本使用

    本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...

  5. golang 无法将Slice类型[]a 转换为 Slice[]b

    因为我想做一个通用的Slice方法,AnySlice,但是将AnySlice定义为[]interface{ } 转换到别的类型,或者相互转换的时候都是会报错. 这是golang比较恶心人的一个地方了, ...

  6. fontawesome图标字体库组件在服务器上显示不出来图标的解决

    这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...

  7. 日志分析工具 Log Parser

    微软的Log Parser, 下载地址 https://www.microsoft.com/en-us/download/details.aspx?id=24659 支持多种文件格式的分析,输入输出, ...

  8. vue2 枚举类型转换

    vue2页面上要把数字0,1,2...之类的数值转换成对应的枚举文本,解决如下: 方案一: 如果是是否的问题,直接: {{enable == 1 ? '是' : '否'}} 即可. 方案二: 通过定义 ...

  9. Spark 官方博文专区（目录）

    关于转载一些 Spark 官方的文档以及 DataBricks 公司博文,本系列基本是中英双语,主要是为了提高自己的英语水平. 文章分类 spark databricks A Tale of Thre ...

  10. Atitit 华为基本法 attilax读后感

    Atitit 华为基本法 attilax读后感 “精神对物质的比重是三比一” 认可拿破仑的这句格言 在20多年中国商业和企业史上,一个最基本.也是最大的现象就是,为什么"中国制造" ...