代码如下：

<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。　　

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果　　

三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本

CSS控制文本的长度，超过一行显示省略号的更多相关文章

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

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

  2. css 字数超过一行显示省略号

    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

  3. 问题：css 自动换行；结果：CSS控制文本自动换行

    CSS控制文本自动换行 CSS控制文本自动换行,阅读CSS控制文本自动换行,1.你定死表格的宽度,即给表格一个宽度值(是 数值,不是百分比) 2.强制不换行div{//white-space:不换行; ...

  4. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  5. 复习-css控制文本字体属性

    css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...

  6. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  7. TextView设置最多显示指定个字符，超过部分显示...(省略号)

    今天在公司遇到一个需求:TextView设置最多显示8个字符,超过部分显示...(省略号),网上找了很多资料,有人说分别设置TextView的android:signature="true& ...

  8. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  9. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

随机推荐

  1. @RequestParam,@PathVariable,@ResponseBody,@RequestBody,@ModelAttribute学习

    1.@RequestParam使用于参数上,用于将请求参数映射到指定参数变量上 例如: @RequestMapping(value="/hello",method=RequestM ...

  2. 快速比较两个uiimage是否相等防止使用原始dsdata造成界面卡顿问题

    UIImage *imageLater = image1; UIImage *imagePre = image2; if (imageLater == imagePre){....}

  3. 从零开始开发iPhone，教你如何在真机调试iPhone应用程序

    对于真机调试,首先要在苹果网站上注册APP ID,以及购买iPhone Develop Program(iDP) 开发者授权,99美元.然后要创建证书请求CSR,创建步骤如下:设置OCSP和CRL为关 ...

  4. 拦截器及 Spring MVC 整合

    一.实验介绍 1.1 实验内容 本节课程主要利用 Spring MVC 框架实现拦截器以及 Spring MVC 框架的整合. 1.2 实验知识点 Spring MVC 框架 拦截器 1.3 实验环境 ...

  5. C#报错"线程间操作无效: 从不是创建控件“XXX”的线程访问它"--解决示例

    C# Winform程序中,使用线程对界面进行更新需要特殊处理,否则会出现异常“线程间操作无效: 从不是创建控件“taskView”的线程访问它.” 在网文“http://www.cnblogs.co ...

  6. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown database &#39;user&#39;

    1.错误描写叙述 2014-7-12 21:06:05 com.mchange.v2.c3p0.impl.AbstractPoolBackedDataSource getPoolManager 信息: ...

  7. binary-tree-level-order-traversal I、II——输出二叉树的数字序列

    I Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to righ ...

  8. windows下redis安装以及简单配置

    1.下载redis 下载地址https://github.com/dmajkic/redis/downloads.有32bit和64bit根据自己需要选择就可以了. 2.安装redis 首先使用cmd ...

  9. 【Sprint3冲刺之前】项目完成时间表

    Sprint2冲刺成果——项目完成时间表 项目完成时间表 经过Sprint2小组总结会议的探讨,我们决定一起约定项目alpha版本,beta版本,release版本的发布时间,发布形式及预计完成效果 ...

  10. 转：DDR原理详解

    首先,我们先了解一下内存的大体结构工作流程,这样会比较容量理解这些参数在其中所起到的作用.这部分的讲述运用DDR3的简化时序图. DDR3的内部是一个存储阵列,将数据“填”进去,你可以它想象成一张表格 ...