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

如果是行内元素则需要使用display设置为inline-block;

下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法:

a,span
{
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width:100px;
max-width:120px; }

CSS换行文本溢出显示省略号的更多相关文章

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

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

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

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

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

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

  4. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  5. CSS文本溢出显示省略号

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

  6. CSS3文本溢出显示省略号

    CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...

  7. 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  8. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  9. ZH奶酪:HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

随机推荐

  1. 剑指offer——树的子结构 (JAVA代码)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 题目描述: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构). 解题思路: 首先看牛客网给出的测试用例: ...

  2. php正则表达式 常用记录

    一正则汉字匹配数字id 汉字 $str = '<a href="http://music.baidu.com/song/121353608" target="_bl ...

  3. 如何阅读android framework源码

    但如果想深入的了解Android系统, 那么可以看下我的一些简单的总结. 知识 Java Java是AOSP的主要语言之一. 没得说, 必需熟练掌握. 熟练的Android App开发 Linux A ...

  4. placeholder修改字体和颜色

    textField.placeholder = @"username is in here!"; [textField setValue:[UIColor redColor] fo ...

  5. apache代理服务器为nodejs服务设置域名

    本机以apache为主,其中 在httpd.conf中先设置 <VirtualHost *:80> ServerName nodejs.cc ServerAlias www.nodejs. ...

  6. 使用 Laravel 前的准备工作

    是的,使用 Laravel 前需要准备开发环境,准备工作做完后,就可以一门心思的投入到学习 Laravel 知识的战斗中去了. Larvavel 是一个 PHP 框架,API 非常语义化.它激进,使用 ...

  7. java源代码跟踪

    首先我们要学会的是将JDK源码加载Eclipse中. 1.点“窗口”——>"首选项",选择左边的"Java"——>"已安装的JRE&quo ...

  8. 用户识别APP项目开发计划书

    用户识别APP项目开发计划书        项目介绍: 用户识别APP,通过在有限时间内引导用户A交互,提取用户的行为特征,然后将APP交给用户X(可能是A也可能是陌生人),在1分钟内引导X交互,判断 ...

  9. 不定长链表队列C语言实现

    #ifndef _CONST_H_#define _CONST_H_ #include <stdio.h>#include <stdlib.h> typedef enum { ...

  10. JavaScript、jQuery、fish的遍历方法(each、forEach)总结

    起因 在工作中,需要在遍历的dom中找到第一个并做下操作然后退出遍历,我首先想到了用each方法,但由于无论是公用的jQuery组件还是公司的fish组件.我都忘记了怎么去退出遍历,所以就有了这篇帖子 ...