精华内容
下载资源
问答
  • .nowrap { width: 100%; white-space: nowrap;... /溢出省略号,支持ie、safari(webkit)/ -o-text-overflow: ellipsis; /溢出省略号,支持opera/ overflow: hidden; /溢出隐藏/ -moz-binding: url(‘el...

    .nowrap {
    width: 100%;
    white-space: nowrap; /强制文本在一行内显示/
    text-overflow: ellipsis; /溢出省略号,支持ie、safari(webkit)/
    -o-text-overflow: ellipsis; /溢出省略号,支持opera/
    overflow: hidden; /溢出隐藏/
    -moz-binding: url(‘ellipsis.xml#ellipsis’); /溢出省略号,支持firefox/
    }

    展开全文
  • CSS Web Design 我爱CSS-Web标准化 Div+css教程 - ...css代码: div{ width:200px;/*容器的基本定义*/ height:200px; background-color:#eee; } /* IE下的样式 */  p span{ display: block; width:
    html代码:
    
    <div>
    <p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
    </div>

    css代码:
    div{
    width:200px;/*容器的基本定义*/
    height:200px;
    background-color:#eee;
    }

    /* IE下的样式 */ 
    p span{
    display: block;
    width:200px;/*对宽度的定义,根据情况修改*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    }

    /* FF 下的样式 */ 
    p{clear:both;}
    p span{
    float:left;
    max-width:175px;   /*IE不能解释该属性,而FF可以*/
    }
    p:after{
    content:"...";

    }


    语法: 
      text-overflow : clip | ellipsis 

      参数: 
      clip :  不显示省略标记(...),而是简单的裁切
      (clip这个参数是不常用的!)
      ellipsis :  当对象内文本溢出时显示省略标记(...)

      说明: 
      设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
      请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

      示例:
      div { text-overflow : clip; } 

      text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

      关于text-overflow属性如何应用,我们作如下的说明讲解:

      text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

    但在FF中用上面的样式是实现不了的,因为text-overflow: ellipsis;是IE中特有的(非CSS标准)。现在在FF下看到的仅仅只是把溢出的内容切除了,说到"溢出切除",这下说到点子上了,在FF中实现就要用到非常规的方法:一个标签作切除内容,再加一个标签作填补省略号用,并且加起来的长度就能超过容器的宽度,本例指的就是DIV的宽度200px,实现的想法就是这样。

        那么继续进一试验,关于切除内容,这个已经基本上解决了,那就来说补省略号,不用JS,用CSS实现的话就要用到伪对象after,伪对象不懂的就要先去温故或百度一下。先从HTML下手,为span标签外再加一层p标签(当然你也可以加其它标签的)


    注意:

    一、仅定义text-overflow:ellipsis; 不能实现省略号效果

    二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。

    三、按52css.com的教程,即本文所讲的方法,同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果:


    展开全文
  • css单行或多行文本溢出显示省略号

    千次阅读 2017-04-08 10:17:50
    一、单行文本溢出省略 二、多行文本溢出省略 1、适用于WebKit浏览器及移动端; 2、兼容各版本浏览器

    一、单行文本溢出省略

    .title{
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	-o-text-overflow: ellipsis;/* for Opera */
    }
    经过本人测试,IE8以下浏览器需要在span标签里才会显示省略号。(有些浏览器需要加上指定的width)

    二、多行文 本溢出省略

    1、适用于 WebKit浏览器及移动端;

    .title-2{
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 2;/*显示的行数*/
    	overflow: hidden;
    }


    2、兼容各版本浏览器

    我这里以两行为例,该方法基本兼容市场上面所有主流浏览器。

    <div class="title-2">
            <span>css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略</span>
    </div>

    .title-2{
    	overflow: hidden;
    	height: 40px;
    	line-height: 20px;
    	position: relative;	
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 2;/*显示的行数*/
    }
    .title-2-text:after{
    	content: "..."; position: absolute; bottom: 0; right: 15px; padding-left: 20px;
    	background: -webkit-linear-gradient(left, transparent, #fff 55%);
    	/*我在Safari上测试时发现透明到白色中间会有一个黑色的过渡后来我就写成-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1) 55%)*/
    	background: -o-linear-gradient(left, transparent, #fff 55%);
    	background: -moz-linear-gradient(left, transparent, #fff 55%);
    	background: linear-gradient(to right, transparent, #fff 55%);
    }

    首先先对当前浏览器进行判断是否为webkit内核,如果不是再使用js对当前页面所有需要多行省略的dom进行遍历并添加class:title-2-text。(主要是利用文本的高度进行判断,当高度超出父元素的高度时添加class)

    if(navigator.userAgent.indexOf('AppleWebKit')==-1){//判断当前浏览器不是webkit内核
    	$(".title-2").each(function(){
        		if(parseFloat($(this).children("span").css("height"))>parseFloat($(this).css("height"))){
        			$(this).addClass("title-2-text");
        		}
        	});
    }

    效果图如下所示:


    展开全文
  • 解决方法:把 overflow:hidden; overflow:hidden;... //溢出用省略号显示 white-space:nowrap; //溢出不换行 (IOS不兼容) 换成 overflow:hidden; text-overflow...

    解决方法:把

    					overflow:hidden; 
    					
    					overflow:hidden; //超出的文本隐藏
    
    					text-overflow:ellipsis; //溢出用省略号显示
    					
    					white-space:nowrap; //溢出不换行 (IOS不兼容)
    					发现在IOS上white-space: normal;这个属性可能会导致页面错乱
    

    换成

    				overflow:hidden; 
    				text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
    
    展开全文
  • css 文本超出显示省略号不起作用

    千次阅读 2020-07-16 09:04:37
    一、单行文本显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 二、多行文本显示省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; ...
  • 经过大量研究,我有一个有效的解决方案,除了任何版本的Firefox:如果您调整浏览器以便应用省略号,Chrome,Safari,甚至IE8 +都会提示省略号处于活动状态.在Firefox(我尝试过的每个版本,包括17和18)都没有那么多.Firefox...
  • CSS省略号

    万次阅读 2019-03-02 09:31:00
    单行文本溢出,显示省略号;第一步(换行):white-space:nowrop;(对于连续的数字或者英文字母可省略)  第二步(溢出隐藏)overflow:hidden;  第三步(文本溢出显示省略号)text-overflow:ellipsis;(省略...
  •  一、当你的文字限定行数,超出部分的文字用省略号显示。  (有两个使用场景:1、单行 2、多行) // 单行 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // 多行 display: -...
  • 作者:WangMin 格言:努力做好自己喜欢的每...实现文本超出显示省略号的常见属性 1)overflow: hidden 这里我们需要注意到一点:这里的overflow并是设置为父级元素div的属性,而是给需要文本省略的标签的属性,需要和o
  • 在实际项目开发中,经常会遇到这样的需求,需要我们...单行文本溢出显示省略号(…)省略号在ie中可以使用text-overflow:ellipsis,但有很多的浏览器都需要固定宽度,同时ff这些浏览器并支持text-overflow:ellipsis...
  • 今天要被分配解决之前项目中的一个问题,说来简单,很简单,特别简单,,,文字两行显示,超出部分省略号即可,简单的css代码 .text { width: 200px; word-break: break-all; text-overflow: ellipsis; display:...
  • MDN overflow text-overflow 滚动条占空间 overflow: overlay; 行为与auto相同,但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit(例如,Safari)和基于Blink的...这个省略号被添加在内容区域中,因此会
  • 两行超出: .warp2{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;... -ms-text-overflow: ellipsis;...单行超出: overflow:hidden; text-ove..
  • 单行要想末尾出现省略号,可以加上css white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 200px;(自己设定一个宽) <div class="single">确保春节期间运行安全 甘肃开展电梯锅炉等...
  • 兼容ie的文字超出显示省略号

    千次阅读 2019-08-21 16:55:39
    单行文本的溢出显示省略号: (需要加宽度width兼容部分浏览器) overflow: hidden; // 超出隐藏 text-overflow:ellipsis; // 显示省略符号来代表被修剪的文本。 white-space: nowrap; // 强制文字一行显示 属性:...
  • 本文转载自wliuxia《实现单行超出部分,省略号表示 兼容各浏览器》 这里介绍两种方法,都是css实现的,其他的js,jq代码,可以去网上搜索很多。 第一种:margin负值定位法 <div class="text_overflow...
  • CSS实现单行文本溢出显示省略号 <p class="content">这里有一个很长很长很长很长很长很长很长很长很长的句子</p> 需要设置这个句子在文字超出屏幕时,结尾变为 ‘…’ 省略号 .content{ overflow: ...
  • 1,公共样式,在公共的CSS文件.../* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: 5px; height: 100%; } .text-ells > :first-child { float: right; ...
  • css实现超出两行显示省略号

    千次阅读 2019-08-09 15:27:27
    <!... <title></title> *{ margin: 0;... 如图,如果在用户手机屏幕宽度下内容超出两行则显示...拓展--单行文本溢出显示省略号: overflow:hidden; text-overflow:ellipsis; white-space:nowrap  
  • 单行内容隐藏 .text{ overflow: hiddden;...但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 多行内容隐藏 .text{ display: -webkit-box; -web...
  • CSS实现单行文本、多行文本溢出显示省略号 单行文本 我们都知道要让文本溢出显示省略号是要用 text-overflow: ellipsis 这个属性的,当然还要配合其他的几个必要属性: 实现方式: width: 100px; // 限制宽度,限定...
  • 图片宽高比例:.newsli01a{width: 100%; height: 0; padding-bottom: 73%; overflow: hidden; position:relative;}清除浮动:.clearfix:after{content:'.';display:block;...}单行省略号:p{o...
  • 单行文字超出显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文字超出显示省略号 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; ...
  • 关于文本溢出的相关属性: 1. text-overflow: clip|... ellipsis : 显示省略符号来代表被修剪的文本。  string :使用给定的字符串来代表被修剪的文本。 2. white-space 属性设置如何处理元素内的空白。 可能的...
  • 我在FF3、Safari和IE6+中找到了一个单行和多行文本的解决方案.ellipsis{white-space:nowrap;overflow:hidden;}.ellipsis.multiline{white-space:normal;}Loremipsumdolorsitamet,consecteturadipisicingelit100px"&...
  • 1、常规css方法——使Firefox以外主流浏览器文字溢出省略号表示下图为此常用方法在各个浏览器下的表现:IE6浏览器下IE7浏览器下chrome谷歌浏览器下Safari浏览器下opera浏览器下Firefox火狐浏览器下可以看到,仅在...
  • 控制一行一行的文本如果太长,就用省略号显示: 样式如下: .myStyle{width:160px;height:50px;line-height:50px;border:4px solid #eee; white-space:nowrap;/*强制文本在一行内显示*/ text-overflow:...
  • 1.单行文本下面这三个一定要一起使用才能实现效果。另外要给盒子加宽度才能有超出部分。white-space: nowrap; /*强制文本在一行内显示*... /*文本溢出时显示省略标记*/具体实现如下:CSS样式: p { display: inline-b
  • 在项目中常常遇到某段文字长度超出了设计的内容,对于溢出的文本需要处理成省略号,于是我就目前遇见过的情况总结一下。 单行,固定宽度 这种情况是最简单的。 &lt;p class="text"&gt; 你以为我...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,290
精华内容 516
关键字:

css单行省略号safari不兼容