<!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. BI工具的应用能给企业带来哪些帮助？

    大数据时代的到来,加快了企业的信息化进程,越来越多的企业选择应用BI工具于企业的日常经营运作之中.BI即商业智能,我们可以将其理解其为改善业务经营决策的一套解决方案.经过多年的发展,BI已经从最初的& ...

  2. Python基于Excel数据加以反距离加权空间插值并掩膜图层

      本文介绍基于Python中ArcPy模块,实现Excel数据读取并生成矢量图层,同时进行IDW插值与批量掩膜的方法. 1 任务需求   首先,我们来明确一下本文所需实现的需求.   现有一个记录有 ...

  3. mongodb基础整理篇————设计[四]

    前言 简单整理一下mongodb的设计. 正文 设计三步曲: 第一步:建立基础文档模型 例子: 1对1建模: 1 对多建模: N对N模型: 第二步: 根据读写况细化 遇到的问题: 解决: 查询连表: ...

  4. Swagger2的介绍和使用

    Swagger2介绍 前后端分离开发模式中,api文档是最好的沟通方式. Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 及时性 (接口变 ...

  5. 第 10 章 使用pyecharts 进行数据展示

    第 10 章 使用pyecharts 进行数据展示 10.1 安装 pyecharts pyecharts 是一个用于生成 Echarts 图表的类库, Echarts 是百度开源的一个数据可视化JS ...

  6. 使用 Gradio 的“热重载”模式快速开发 AI 应用

    在这篇文章中,我将展示如何利用 Gradio 的热重载模式快速构建一个功能齐全的 AI 应用.但在进入正题之前,让我们先了解一下什么是重载模式以及 Gradio 为什么要采用自定义的自动重载逻辑.如果 ...

  7. 开箱即用！Linux 内核首个原生支持，让你的容器体验飞起来！| 龙蜥技术

    简介: 本文将从 Nydus 架构回顾.RAFS v6 镜像格式和 EROFS over Fscache 按需加载技术三个角度来分别介绍这一技术的演变历程. 文/阿里云内核存储团队,龙蜥社区高性能存储 ...

  8. EDAS微服务应用同城容灾最佳实践

    简介: 大多数业务应用只要做到同城双活,就可以避免掉大多数数据中心不可用故障.本实践就是帮助大家高效.低成本地实现自己的业务应用具备同城双活容灾能力. 前言 上云目前已经是绝大数企业首选的IT基础设施 ...

  9. DataWorks搬站方案：Azkaban作业迁移至DataWorks

    简介: DataWorks迁移助手提供任务搬站功能,支持将开源调度引擎Oozie.Azkaban.Airflow的任务快速迁移至DataWorks.本文主要介绍如何将开源Azkaban工作流调度引擎中 ...

  10. 技术干货 ｜ Native 页面下如何实现导航栏的定制化开发？

    ​简介: 通过不同实际场景的描述,供大家参考完成 Native 页面的定制化开发. ​ 很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制,本文旨在通过不同实际场景的描述 ...