如标题所示...

<!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. myeclipse配置SVN插件

    方法一:link安装  安装subclipse, MyEclipse SVN插件  1.从官网下载最新的site-1.x.x.zip文件,网址是:folderID=2240" target= ...

  2. 解决IOS微信内置浏览器返回后不执行js脚本的问题

    在A页面写一个$(function(){}) 后随便点击一个URL跳转到B页面 利用微信内置浏览器 返回键返回到A页面后发现这段JS不执行,后来找到了解决方案 $(function () { var ...

  3. RPC-client异步收发核心细节？

    通过上篇文章的介绍,知道了要实施微服务,首先要搞定RPC框架,RPC框架分为客户端部分与服务端部分. RPC-client的部分又分为: (1)序列化反序列化的部分(上图中的1.4) (2)发送字节流 ...

  4. 十三、 Spring Boot 启动加载数据 CommandLineRunner

    实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求. 为了解决这样的问题,spring Boot 为我们提供了一个方法,通过实现接口 CommandLineRunner 来 ...

  5. Java并发编程实践读书笔记（2）多线程基础组件

    同步容器 同步容器是指那些对所有的操作都进行加锁(synchronize)的容器.比如Vector.HashTable和Collections.synchronizedXXX返回系列对象: 可以看到, ...

  6. 【ANT】使用ANT自动执行JMeter用例

    1.把\apache-jmeter-3.1\extras目录下的build.xml和jmeter-results-detail-report_21.xsl两个文件拷贝到用例所在目录: 2.修改用例名称 ...

  7. PL/SQL Developer使用技巧（部分）

    PL/SQL Developer使用技巧(部分) 关键字自动大写 在sql命令窗口中输入SQL语句时,想要关键字自动大写,引人注目该怎么办呢? 一步设置就可以达成了.点击Tools->Prefe ...

  8. springboot swagger-ui结合

    随着移动互联的发展,前后端的分离已经是趋势.前后端已不是传统部门的划分,而是它们各有一套的生态系统,包括不同的开发语言.不同的开发流程.构建方式.测试流程等.做前端的不需要会maven作为构建工具,后 ...

  9. iOS 通知的变化ios9-10，新功能展示

    二.新功能展示 1  使用 /iOS通知新功能玩法 2.  全面   iOS10里的通知与推送详情 一.变化 四.Notification(通知) 自从Notification被引入之后,苹果就不断的 ...

  10. iOS 电脑新装的系统, 使用sourceTree 创建本地仓库的时候, 总是提示, 无效路径

    把qq聊天记录分享出来: 我电脑新装的系统, 使用sourceTree 创建本地仓库的时候, 总是提示, 无效路径请问哪位遇到过求指教群里有产品经理没有? ssh 配制的不对重装系统过后,重新生成一下 ...