<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta name="author" content="xxx" />
<meta charset="utf-8"/>
<style type="text/css">
div{
width:100px;
height:100px;
border:1px solid red;
overflow:hidden;
word-break:break-all;
white-space:nowrap;/*不允许换行 只能在一行显示*/
text-overflow:ellipsis;/*注意必须结合 overflow:hidden; white-space:nowrap；一起使用*/
}
</style>
</head>

<body>
<div>congraduation congraduation congraduation congraduation congraduation fawegtewged</div>
</body>
</html>

CSS基础：text-overflow:ellipsis溢出文本的更多相关文章

  1. CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

    4要素: width: 125px;  //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...

  2. CSS 技巧一则 -- 不定宽溢出文本适配滚动

    在日常布局当中,肯定经常会遇到文本内容超过容器的情况.非常常见的一种解决方案是超出省略. 但是,有的时候,由于场景的限制,可能会出现在一些无法使用超出打点省略的方法的场景,譬如在导航栏中: 这种情况下 ...

  3. HTML+css基础 Text文本属性

    Text文本属性: 1.颜色  color color:red 2.文本缩进 text-indent 属性值 数字+px: text-indent:10px: 3.文本修饰 text-decorati ...

  4. css基础语法二（常用文本与背景属性）

    [CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,7 ...

  5. 使用 text-overflow: ellipsis溢出文本显示省略号时碰到的小问题

    本人刚刚实习,第一次写东西,希望大家多多鼓励. 项目中需要实现标题超过一定长度以省略号的形式显示,不是什么难的问题.可是我不想用js实现,就百度了发现text-overflow: ellipsis;( ...

  6. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  7. css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.

    这个同时需要. text-overflow  ;  overflow  ;  white-space ; width ;  四个属性才可以. <!DOCTYPE html> <htm ...

  8. css & multi line words & ellipsis

    css & multi line words & ellipsis bug .news-card-content-title { width: 100%; height: 0.8rem ...

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

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

随机推荐

  1. 在列表页，按照指定的category取所属的post列表

    在某些指定的页面,例如news,blog等页面,需要列出指定某种类型的文章列表,这种情况下,可以先添加两个category,分别命名news,blog,然后再分别添加几个post,指定每个post所属 ...

  2. backbonejs中的集合篇(一）

    一:集合概念 集合是多个模型,如果把模型model理解为表结构中的行,那么集合collection就是一张表,由多个行组成.我们经常需要用集合来组织和管理多个模型. 二:创建集合 1:扩展Backbo ...

  3. backbonejs中的模型篇(二）

    一:模型标识符 每个模型都有一个用作唯一标识符的ID属性,以便在不同模型间进行区分.通过id属性我们可以直接访问模型对象当中用于标识符存放的属性,默认属性名为id,但也可以通过设置idAttribut ...

  4. LevelDb简单介绍和原理——本质：类似nedb，插入数据文件不断增长（快照），再通过删除老数据做更新

    转自:http://www.cnblogs.com/haippy/archive/2011/12/04/2276064.html 有时间再好好看下整个文章! 说起LevelDb也许您不清楚,但是如果作 ...

  5. 引用CSS文件到html网页里方法

        引用CSS文件到Html方法-css引入,css引用 使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用cs ...

  6. Jquery异步提交$.ajax的使用

    function test(){ var myEntity=new Object(); myEntity.pro1="xxx"; myEntity.pro2=10; $.ajax( ...

  7. CSS3学习教程：Media Queries详解

    说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  8. SQL远程创建数据库

    CREATE PROCEDURE [dbo].[p_CreateDB]   @Des_DB sysname,  @ServerName sysname=N'',  @UserName sysname= ...

  9. Grunt设置

    Grunt完成对LESS实时编译. 安装 安装grunt需要先安装node.js. 之后需要借助npm来安装grunt-cli,在cmd中npm install -g grunt-cli.(测试gru ...

  10. Html11.09CSS层叠样式表内容整理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...