css中文本超出部分省略号代替

p{

    width: 100px; //设置p标签宽度

    white-space: nowrap; //文本超出P标签宽度不换行，而是溢出

    overflow: hidden; //文本超出P标签，超出部分隐藏

    text-overflow: ellipsis; //CSS3的新属性：显示省略号代替被修剪的文本；其他两个属性：1、clip-修剪文本，2、string-使用给定的字符串来代表被修剪的文本

}

时间： 2024-08-26 03:22:54

css中文本超出部分省略号代替的相关文章

css实现文本超出部分省略号显示

一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: 1 div { // 单行 2 white-space: nowrap; 3 overflow: hidden; 4 text-overflow: ellipsis; 5 } 1 div { // 多行 2 overflow: hidden; 3 text-overflow: ellipsis; 4 display: -webkit-box; // 注意不是flex 5 -webkit-line-clam

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;

文本超出显示省略号/数字字母折行有关css 属性

文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折行 word-break:break-all; 英文单词会分开折行 word-wrap:break-word; 英文单词完整处折行令拓展: word-spacing :5px; 单词/字符之间间隔距离 white-space是字符是否换行显示的. 原文地址:https://www.cnbl

css实现文本超出li宽度的部分隐藏

css实现文本超出li宽度的部分隐藏:在某些实际应用中,希望把文本超出的部分隐藏而非换行,下面就是一段这样的代码实例,大家可以参考一下.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&

CSS换行文本溢出显示省略号

现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素则需要使用display设置为inline-block; 下面是对a,span等行内元素的使用CSS换行文本溢出显示省略号的比较准确的用法: a,span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-s

文本超出用省略号代替

单行文本超出省略号显示 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本超出省略号显示 height:xx; // 将height设置为line-height的整数倍,防止超出的文字露出. overflow: hidden; //超出隐藏 text-overflow: ellipsis; //文本超出用省略号显示 display: -webkit-box; //显示方式(为弹性伸缩盒子模型显示) -webkit

CSS中文本继承情况

无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html vertical-align: 垂直文本对齐 CSS中文本可以继承父级样式体系列属性 font:组合文字 font-family:字体系列 font-weight:文字粗细 font-size:文字大小 font-style:文字风格文本系列 text-indent:文本缩进 text-align:文本对齐方式 line-height:行高 color:文本颜色

CSS控制文本超出指定宽度显示省略号和文本不换行

一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) :需与overfl

css中文本框与按钮对不齐解决方案

我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> <input type=”submit” name=”button” id=”button” value=”提交” /> </form> CSS 代码 #text1{border:1px solid red;height:20px;} #button{background:#FFFFFF;co