您当前的位置:主页 > 教程合集 > Html/css网站利发国际Html/css

CSS控制标题字符长度的方法

发布时间:2017-02-28编辑:余斗阅读:(0)字号:
    我们在网页制作的时候,一般列表页都会一定的长度,而在后台调用的时候,调出的标题都是整个标题长度,如果不加以截取,可能会换行或者错位,这样对于用户体验不好,我们需要控制下标题长度。 常用的思路是,直接控制调出标题的字数,这样就不会错位,但是对于手机端来说,不同的屏幕尺寸,宽度也不一样,如果截取了字符,就会有大片空白,这样不好,余斗今天教大家用css来控制标题长度,多余的部分我们则隐藏,具体方法如下: HTML代码为:

    <div class="abc">我是标题,我很长,很长,真的很长,已经长的令人无法接受了!!!</div>
     
    CSS代码为:

    <style type="text/css">
    .abc {
    background-color: #CCC;
    width: 200px;
    overflow:hidden;
    text-overflow:ellipsis;/*文字溢出的部分隐藏并用省略号代替*/
    white-space:nowrap;/*文本不自动换行*/
    </style>
     
关键字词CSS
余斗余斗
  1. 转载请注明:CSS控制标题字符长度的方法
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2017-02-28最后更新
文章页图片自动居中,自适应手机且宽度100%实现
CSS实现单行、多行文本溢出显示省略号
手机扫一扫 随身带着看

利发国际

百度360搜索搜狗搜索