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

当元素设置固定宽度之后，如果元素内的文本超出宽度之后将其设置为省略号效果的方法：

text-overflow 属性规定当文本溢出包含元素时发生的事情。

语法

text-overflow: clip|ellipsis|string;
值 描述  
clip 修剪文本。  
ellipsis 显示省略符号来代表被修剪的文本。  
string 使用给定的字符串来代表被修剪的文本。

white-space 属性设置如何处理元素内的空白。

可能的值

值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

确保所设置元素已有固定宽度：

.calss{
      text-overflow:ellipsis;
      white-space:nowrap;
      overflow:hidden;
        }

效果如下：

时间： 2024-09-29 00:18:15

当文本溢出时显示为省略号的相关文章

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-Typ

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

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

文本溢出时显示省略号

效果如图: <!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

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

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

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

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

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

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

CSS实现文本溢出的部分用省略号代替的方法

我们通常在设计网页的时候,由于相关的需求需要一行定宽,然而有时候文字的展现过长就会溢出.今天,E良师益友网就单行和多行两种情况来说明一下溢出的文字用省略号代替. 一.单行溢出 1,单行溢出,超出部分显示...或者截取.前提必须有宽度. CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip; 实现代码: width:300px; overflow: hidden; text-overf

html文本太长显示为省略号的方法

<a>元素在content比较多的情况下,显示不全,需要省略显示,并且在鼠标停留的时候有全文提示.其实现方法是:css.test{white-space:nowrap;/*不换行*/overflow:hidden;/**/text-overflow:ellipsis;/*超长显示为省略号*/}标签的写法:<a href="#" title="abc">content</a>注意:一点要写title属性,该属性是提示信息.