如标题所示...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS 文本溢出时显示省略标记</title>

<style type="text/css">

.overflowTest{

    width:200px;/*基本容器显示宽度*/

    overflow:hidden;/*overflow 属性规定当内容溢出元素框时发生的事情。*/

    text-overflow:ellipsis;/*clip:修剪文本|ellipsis:显示省略符号来代表被修剪的文本|string:使用给定的字符串来代表被修剪的文本(自定义)*/

    white-space:nowrap;/*文本不会换行*/

}

</style>

</head>

<body>

<div>正常显示:qwertyuiopasdfghjklzxcvb</div>

<div class="overflowTest">处理后:qwertyuiopasdfghjklzxcvb</div>

</body>

</html>

CSS 文本溢出时显示省略标记的更多相关文章

  1. css 文本溢出时显示省略号

    .text-ellipsis { width:100px; height:60px; overflow: hidden;//隐藏滚动条 text-overflow:ellipsis; white-sp ...

  2. 【UWP】仅在TextBlock文本溢出时显示Tooltip

    前言 这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考. 通常,我们使用ToolTip最简单的方式是这样: <TextBlock Text="Test&qu ...

  3. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  4. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  5. CSS文本溢出，显示省略号（...）

    方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...

  6. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  7. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  8. text-overflow文本溢出隐藏“...”显示

    一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...

  9. table内容超出宽度时隐藏并显示省略标记

    HTML中,一个表格,要达到二个条件: 1.内容多了不自动换行: 2.固定单元格宽度.如果内容超出,则隐藏: 如 果在IE下,只是写成<table style="table-layou ...

随机推荐

  1. 算法题：A除以B

    题目描写叙述 本题要求计算A/B.当中A是不超过1000位的正整数,B是1位正整数.你须要输出商数Q和余数R,使得A = B * Q + R成立. 输入描写叙述: 输入在1行中依次给出A和B,中间以1 ...

  2. HDU　1715 大菲波数

    /* 中文题意: 中文翻译: 题目大意:求1000以内的菲波数. 解题思路:用大数来计算.用二维数组来存数. 难点具体解释:用二维数组存数,開始的一维存的是1000个Pi,后面那一维是用来存数字的. ...

  3. OS X第三方类库管理工具cocoapods入门

    一.简介 什么是cocoapods?--是OS X和iOS下一个第三方类库管理工具.通过cocoapods,可以为项目添加"Pods"依赖库,并且管理其版本. cocoapods好 ...

  4. jQuery里使用setinterval

    如果第一个参数是一个已写好的函数而不是匿名代码块,一定不要加引号,直接var ** = setinterval{myFunction ,500},只能这样,加括号会直接只调用一次,自然不行,加引号和括 ...

  5. Centos7.4下用Docker-Compose部署WordPress

    前言 最近在学习Docker相关知识,通过阅读第一本Docker书后,正想着手实战用一下这个技术,但又不太敢直接在项目环境下动手.考虑足足三秒钟之后决定买个阿里云ECS搭建一个属于自己的基于Docke ...

  6. NanUI文档 - 使用网页来设计整个窗口

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  7. Java Web 单表操作

    为了测试 JavaWeb 项目,我做了一个关于一张表的更新操作. 1.加群 如果需要本项目的源码,欢迎加群:438255459 2.解压 解压开这个包,然后用 Eclipse 打开项目,至于涉及到 T ...

  8. django+Python数据库利用Echarts实现网页动态数据显示

    这几天一直在思考前端--服务器--数据库的之间的数据交互,最后决定了用django来做,为什么呢?因为我这只是在开发阶段,所以就用了django自带的web服务器(很方便)而且呢,它还自带了数据库sq ...

  9. IEEE1588 verision2 报文介绍

    PTP报文 PTP verision2报文是由 报头,主体 和 报尾 (header, body, and suffix)组成,报尾长度可能为0. PTP verision2报文在verision1的 ...

  10. CSS文字不换行，溢出省略

    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;