<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>标题</title>

<style type="text/css">

div{

  overflow:hidden;

  white-space:nowrap;

  height:30px;

  width:230px;

  border:1px solid red;

  line-height:30px;

  margin-top:10px;

  text-overflow:ellipsis;

}

</style>

</head>

<body>

<div class="first">每一天都是新的，所以生活要和昨天有所不同！</div>

</body>

</html>

复制代码

CSS实现标题超出宽度省略号来表示的更多相关文章

  1. css实现文本超出部分省略号显示

    一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...

  2. css中文本超出部分省略号代替

    p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...

  3. CSS解决文字超出显示省略号问题

    超出一行 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出多行 overflow: hidden; text-ove ...

  4. 【CSS】文字超出显示省略号&连续字符换行

    方法1.多行控制(css3) .text { width: 100%; word-break: break-all; display: -webkit-box; -webkit-line-clamp: ...

  5. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

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

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

  7. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  8. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

  9. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

随机推荐

  1. AngularJS 学习笔记二

    AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML ...

  2. (DP6.1.4.2)POJ 1088 滑雪

    其实下面用到的是搜索.(呜呜,DP写的过了测试用例但是却总是AC不了,所以改用搜索来做了) /* * POJ_1088.cpp * * Created on: 2013年10月13日 * Author ...

  3. ASP.NET MVC- 数据验证机制

    ASP.NET MVC的数据验证机制,比起ASP.NET WEBFORM那种高效很多.下面记录以下两个示例,以便日后方便查阅. 方式一:在Controller里通过AddModelError方法返回错 ...

  4. list删除操作 java.util.ConcurrentModificationException

    首先大家先看一段代码: public static void main(String[] args) { List<String> listStr = new ArrayList<S ...

  5. Hibernate映射解析——七种映射关系

    首先我们了解一个名词ORM,全称是(Object Relational Mapping),即对象关系映射.ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现,这样开发人员就可以把对 ...

  6. 【Cocos2d-x】 HttpClient 网络通信(Http)的简单应用

    Cocos2dx 为我们封装了在cocos2dx中http的网络框架,其文件在cocos2dx引擎包的extensions\network文件下的 HttpClient.HttpRequest .Ht ...

  7. Flash Builder 4.6 界面显示一半中文一半英文？

    Flash Builder 4.6 (简称 Flex 4.6 或 FB 4.6)启动后界面有时候会显示一半中文,一半英文(这种奇葩的情况一般发生在 FB 4.6 刚安装后或操作系统安装一个类似 SP1 ...

  8. 使用C#开发纽曼USB来电小秘书客户端小结

    在前面用C#开发完CRM的来电弹屏之后,有些客户有了新的要求,他们希望不但能够实现来电弹屏,更希望能够将呼入呼出的电话录音并上传到CRM服务器上,方便日后跟踪记录.于是便有了来电小秘书客户端的开发.  ...

  9. TreeView1MouseMove

    procedure TForm1.TreeView1MouseMove(Sender: TObject; Shift: TShiftState; X,   Y: Integer); var   nod ...

  10. android Camera 数据流程分析

    这篇文章主要针对其数据流程进行分析.Camera一般用于图像浏览.拍照和视频录制.这里先对图像浏览和拍照的数据流进行分析,后面再对视频电话部分进行分析. 1.针对HAL层对摄像头数据处理补充一下 Li ...