用CSS让容器的溢出部分内容隐藏起来smarty就可以不用截取字符

_嚸_

_嚸_

2016-02-19 21:34

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的用CSS让容器的溢出部分内容隐藏起来smarty就可以不用截取字符,希望大家看完后能赶快学习起来。

    在网页设计中,会遇到文本超过固定长度导致整体的网页变形的情况。程序员往往需要截取固定的长度来实现某些固定长度的控制。介绍一种直接采用CSS的代码控制来实现文本截取的方法。与程序员的直接字符截取的方式有点区别,其优势是可以自动控制文本显示的长度;缺点是不同浏览器的兼容性并不完美。使用到 overflow,text-overflow,white-space 这三个主要的属性,其他的代码属于修饰作用。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

    CSS代码:
    style
    .texthidden{
     width:200px;
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap;
     border:1px solid #ddd;}
    /style

    HTML代码:
    div class="texthidden"
    CSS让容器的溢出部分内容隐藏起来
    /div

代码分析:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

1. width:200px; //指定宽度:
2. overflow:hidden;  //将超出内容隐藏
3. text-overflow:ellipsis; //IE专用属性,文本溢出时显示省略标记();其他浏览器不支持。
4. white-space:nowrap; //强制内容不换行。强制在同一行内显示所有文本,直到文本结束或者遭遇 br 元素

    目前使用这种方法比较成功的示例是Gmail的内容显示,在IE下达到最好的效果。如果是FF那就比较糟糕,总是会出现截取半个中文的效果。其中涉及到最主要的原因是 text-overflow 这个属性只在IE下有效,目前很多CSS属性也存在这个问题,特别重要的是Margin和Padding这两个属性,往往导致页面出现各种不同的效果;在页面设计的时候,需要注意这些属性在不同浏览器的显示效果。

展开更多 50%)
分享

猜你喜欢

用CSS让容器的溢出部分内容隐藏起来smarty就可以不用截取字符

Web开发
用CSS让容器的溢出部分内容隐藏起来smarty就可以不用截取字符

iPhone如何将照片悄悄隐藏起来

手机软件
iPhone如何将照片悄悄隐藏起来

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

把word2003中部分文字隐藏起来的方法

电脑入门
把word2003中部分文字隐藏起来的方法

Word2024中文档折叠或展开部分内容

word
Word2024中文档折叠或展开部分内容

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何把QQ中的IP地址隐藏起来

电脑入门
如何把QQ中的IP地址隐藏起来

win7如何将光驱隐藏起来?

电脑网络
win7如何将光驱隐藏起来?

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

电脑蓝屏怎么办 教你散热除尘方法

电脑蓝屏怎么办 教你散热除尘方法

教你如何提取PPT背景音乐

教你如何提取PPT背景音乐
下拉加载更多内容 ↓