如标题所示...

<!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. 基于MATLAB的人脸识别算法的研究

    基于MATLAB的人脸识别算法的研究 作者:lee神 现如今机器视觉越来越盛行,从智能交通系统的车辆识别,车牌识别到交通标牌的识别:从智能手机的人脸识别的性别识别:如今无人驾驶汽车更是应用了大量的机器 ...

  2. ES5继承

    原型继承 <script type="text/javascript"> function Father(){}//构造函数 //原型属性 Father.prototy ...

  3. Mac ssh 连接报错 Permission denied (publickey)

    用的阿里云服务器,如果直接连接,会报下面错误: $ ssh root@47.94.132.115 Permission denied (publickey). 创建服务器的时候,连接秘钥会生成并下载到 ...

  4. 移动浏览器H5页面通过scheme打开本地应用

    在移动端浏览器H5页面中,点击按钮打开本地应用主要通过 scheme 协议.本文主要介绍如何在浏览器H5页面中通过 scheme 协议打开本地应用. scheme协议定义 scheme 是一种页面之间 ...

  5. springboot(十五)：springboot+jpa+thymeleaf增删改查示例

    这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...

  6. javascript中的双向绑定

    阅读目录 一:发布订阅模式实现数据双向绑定 二:使用Object.defineProperty 来实现简单的双向绑定. 前言: 双向数据绑定的含义:可以将对象的属性绑定到UI,具体的说,我们有一个对象 ...

  7. docker学习笔记（一）

    docker是一种容器技术,现在火的一塌糊涂,最近公司打算用docker统一开发.测试.预上线.上线环境,所以花了时间研究一下. docker是一种容器技术,之前是基于LXC容器,现在已经改成基于li ...

  8. 浅谈Async/Await

    概要 在很长一段时间里面,FE们不得不依靠回调来处理异步代码.使用回调的结果是,代码变得很纠结,不便于理解与维护,值得庆幸的是Promise带来了.then(),让代码变得井然有序,便于管理.于是我们 ...

  9. 【Uva623】500！(高精)

    Description 求N! \(N \leq 1000\) Sample Input 10 30 50 100 Sample Output 10! 3628800 30! 265252859812 ...

  10. Ubuntu上安装flashplayer

    当你已经为linux flashplayer无法安装抓狂的时候,不妨来看看吧 我使用的是Ubuntu 12.04.4 LTS,由于firefox无法播放flash所以去下载了一个adobeflashp ...