<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>溢出文本</title>
<style>
dl{
width:240px;
border:solid 1px #ccc;
}
dt{
padding:8px 8px;
font-size: 13px;
text-align: left;
font-weight: bold;
color:#71790C;
margin-bottom: 12px;
border-bottom: solid 1px #efefef;
}
dd{
font-size: 0.78em;
height:1.5em;
width:220px;
padding:2px 2px 2px 18px;
margin:2px 0;
/*主要作用*/
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-bingding:url('ellipsis.xml#ellipsis'); }
</style>
</head>
<body>
<dl>
<dt>收藏新闻</dt>
<dd>钱币|5ku司彩银虎币价值几何 三连8豹子钞市值达千元</dd>
<dd>海外|英国美术馆办窥视模特洗澡展 探秘荷兰人体博物馆</dd>
<dd>藏界|地产商谈收藏:跟拿地异曲同工 拾垃圾的老外</dd>
</dl>
</body>
</html>

CSS 溢出文本的更多相关文章

  1. CSS溢出文本省略(text-overflow)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

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

    css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...

  4. CSS换行文本溢出显示省略号

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

  5. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

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

  6. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  7. CSS学习笔记:溢出文本省略(text-overflow)

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

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

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

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

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

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

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

随机推荐

  1. 使用yum安装unixODBC时报错怎么办

    使用 yum 安装 unixODBC 时报错怎么办 背景介绍 在使用 yum 安装 unixODBC 时,上报如下错误: [root@mc0-0002 odbc_connection]# yum in ...

  2. 活动开启 | 以梦筑码 · 不负韶华 开发者故事征集令,讲出你的故事,有机会参加HDC.Together 2023

      HarmonyOS面世以来,经历了3大版本迭代,系统能力逐步完善,生态加速繁荣.一路前行,是开发者们点亮漫天星光.点滴贡献,聚沙成塔,开发者们正用代码改变世界. 是梦想,激励我们一路前行.在黎明到 ...

  3. POJ2251 基础bfs

    题目: 你进入了一个3D的宝藏地宫中探寻宝藏到了宝藏,你可以找到走出地宫的路带出宝藏,或者使用炉石空手回家. 地宫由立方体单位构成,立方体中不定会充满岩石.向上下前后左右移动一个单位需要一分钟.你不能 ...

  4. 【6】Spring JavaConfig和常见Annotation

    Java 5 的推出,加上当年基于纯 Java Annotation 的依赖注入框架 Guice 的出现,使得 Spring 框架及其社区也"顺应民意",推出并持续完善了基于 Ja ...

  5. 重新整理.net core 计1400篇[一] (.net core 命令行)

    前言 把.net core 从新整理一遍. 下面介绍命令行. 正文 运行一下:dotnet new --list 那么这个时候会返回非常多的模板给你们. 这时候会给我们列出:project Templ ...

  6. SpringBoot使用Redis做缓存结合自带注解

    配置Spring Cache <dependency> <groupId>org.springframework.boot</groupId> <artifa ...

  7. el-row el-col 的点击事件@click 没反应

    el-col 是vue封装的组件,不支持原生事件的触发.要想触发事件需要加修饰符".native" 无效果: <el-col :span="4" @cli ...

  8. 在RockyLinux 9.3环境中采用RPM模式部署Oracle 19C

    在RockyLinux 9.3环境中采用RPM模式部署Oracle 19C 用途 在开发数据库系统时,可以验证功能是否与Oracle的表现一致,验证正确性和兼容性 限制 虚拟机安装,CPU 2*4 内 ...

  9. 本地使用ts配置

    1.需要安装的依赖 "dependencies": { "html-webpack-plugin": "^5.5.0", "ts- ...

  10. 3 种发布策略,解决 K8s 中快速交付应用的难题

    作者 | 郝树伟(流生)阿里云高级研发工程师 前言 软件技术更新换代很快,但我们追求的目标是一直不变的,那就是在安全稳定的前提下,增加应用的部署频率,缩短产品功能的迭代周期,这样的好处就是企业可以在更 ...