CSS 文本溢出时显示省略标记

如标题所示...

<!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> 
时间: 2024-10-23 11:51:16

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

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

原文:[UWP]仅在TextBlock文本溢出时显示Tooltip 前言 这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考. 通常,我们使用ToolTip最简单的方式是这样: <TextBlock Text="Test" ToolTipService.ToolTip="Test" /> 这样在光标悬浮在TextBlock上方时,会显示一个提示条,但是这似乎又违背了一个设计原则: ToolTip作为提示,应该仅在当前内容显示不全

当文本溢出时显示为省略号

当元素设置固定宽度之后,如果元素内的文本超出宽度之后将其设置为省略号效果的方法: text-overflow 属性规定当文本溢出包含元素时发生的事情. 语法 text-overflow: clip|ellipsis|string; 值 描述   clip 修剪文本.   ellipsis 显示省略符号来代表被修剪的文本.   string 使用给定的字符串来代表被修剪的文本. white-space 属性设置如何处理元素内的空白. 可能的值 值 描述 normal 默认.空白会被浏览器忽略. p

css文本溢出隐藏显示省略号(单行+多行)

文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     overflow: hidden;//文本溢出隐藏     text-overflow: ellipsis;//文本溢出显示省略号     white-space: nowarp;//不换行 } 二. 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号 在webkit内核中,可以利用-webkit-

文本溢出时显示省略号

效果如图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0;"> <title>test</title> <style> .test{ width:200px

控制表格内的文本溢出时隐藏

table{ table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{ text-align:center; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overflow:hid

css 文本溢出截断省略方案

在项目开发的过程中,我们往往遇到文本溢出需要添加省略号的需求.而这个需求可以分解为两个,一个是单行溢出省略,一个是多行溢出省略. 单行溢出省略 <div class="ellipsis"> 这是一行文字,需要溢出添加省略号,因为这行文字特别特别长 </div> <style> .ellipsis { width: 100%; /* IE6 needs any width */ white-space: nowrap; /*强制不换行*/ -o-tex

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

一.文本溢出省略号显示 1.文本溢出是否"..."显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时"..."显示) 定义此属性有四个必要条件:1)须有容器宽度:width:value: 2)强制文本在一行内显示:white-space:nowrap: 3)溢出内容隐藏:overflow:hidden: 4)溢出文本显示"...":text-overflow:ellipsis: 2.溢出属性:overf

CSS---解决内容过多就会出文本溢出(显示在区域外面,不换行的情况)

当我们设置我的的div,或者其它文本框固定宽度之后,文本内容过多就会出文本溢出(显示在区域外面,不换行的情况). 这时我们可以使用Css中的几个属于来解.有以下的三个属于可以解决问题: 1,word-break 属性规定自动换行的处理方法.word-break: normal|break-all|keep-all;值 描述normal 使用浏览器默认的换行规则.break-all 允许在单词内换行.keep-all 只能在半角空格或连字符处换行.2,overflow 属性规定当内容溢出元素框时发

CSS鼠标经过时显示

CSS鼠标经过时显示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS Tooltips(鼠标经过时显示)</title> <style type="text/css"> /*Tooltips*/ .tooltips{ position:relative; /*这