<!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. 升级gradle:Could not find method jackOptions() for arguments

    前言 这是我在升级gradle发生的错误. 解决 原因是被废弃了: 删除: jackOptions { enabled true } 解释一下什么是jack: Jack 是 Java Android ...

  2. 【Oracle】PL/SQL制作唯一标识，固定字段+日期+流水码，流水码每日重置

    [Oracle]PL/SQL制作唯一标识,固定字段+日期+流水码,流水码每日重置 首先创建序列 create sequence sequence_name minvalue 0 maxvalue 99 ...

  3. 力扣242(java)-有效的字母异位词（简单）

    题目: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词. 注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位词. 示例 1: 输入: s ...

  4. HarmonyOS NEXT应用开发案例—状态栏显隐变化

    介绍 本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化.该场景多用于各种软件的首页.我的等页面中. 效果预览图 使用说明 加载完成后显示状态栏显隐变化页面,上下拖动屏幕, ...

  5. 从零开始入门 K8s | 调度器的调度流程和算法介绍

    导读:Kubernetes 作为当下最流行的容器自动化运维平台,以声明式实现了灵活的容器编排,本文以 v1.16 版本为基础详细介绍了 K8s 的基本调度框架.流程,以及主要的过滤器.Score 算法 ...

  6. dotnet 警惕 Task 的 ContinueWith 带上 OnlyOnFaulted 参数抛出取消异常

    本文记录 dotnet 的一个令人迷惑的设计,在 Task 里,有一个叫 ContinueWith 的方法,此方法可以在 Task 完成时执行传入的委托.在 ContinueWith 方法里面,还有一 ...

  7. 程序员天天 CURD，怎么才能成长，职业发展的思考 ？

    前言 关于程序员成长的话题,我前面写过一篇文章 - 程序员天天CURD,职业生涯怎么发展的思考. 现在回头看,对程序员这个职业发展的认识以及怎么发展还是有一些局限性.有一句话是这么说的:人的成长就是不 ...

  8. 十、Doris操作参考手册

    1.SQL参考 1.1  用户账户管理 1.2  集群管理 1.3  DDL 1.4  DML 2.函数参考 2.1  日期函数 2.2  字符串函数 2.3  聚合函数 2.4  Cast转换函数 ...

  9. 二、Doris架构原理

    Doris是一个MPP的OLAP系统,以较低的成本提供在大数据集上的高性能分析和报表查询功能. MPP (Massively Parallel Processing),即大规模并行处理.简单来说,MP ...

  10. 快速入门一篇搞定RocketMq-实现微服务实战落地

    1.RocketMq介绍 RocketMQ起源于阿里巴巴,最初是为了解决邮件系统的高可靠性和高性能而设计的.在2016年开源分布式消息中间件,并逐渐成为Apache顶级项目.现在是Apache的一个顶 ...