• 技术文章 >web前端 >css教程

    css ellipsis不起作用怎么办

    藏色散人藏色散人2020-11-20 11:41:58原创57

    css ellipsis不起作用的解决办法:首先打开css;然后将属性“text-overflow:ellipsis”跟“overflow:hidden;”以及“white-space:nowrap;width:150px;”一起使用即可。

    推荐:《css视频教程

    解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    使text-overflow:elipsis起作用:

    想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:nowrap;width:150px;一起使用

    1、text-overflow语法:

    text-overflow : clip | ellipsis

    2、text-overflow参数说明:

    clip: 不显示省略标记(...),而是简单的裁切

    elipsis: 当对象内文本溢出时显示省略标记(...)

    3、简单使用:

    <!doctype html><html>
        <head>
            <meta charset="utf-8">
            <title>测试页面</title>
        </head>
    
        <style type="text/css">        
            .test{
                text-overflow:ellipsis;
                overflow:hidden;
                white-space:nowrap;
                width:150px;
                }
        </style>
        <body>
            <ul id="textFlow">
                <li class="test"><a href="#">第一标题:奇艺之旅</a></li>
                <li class="test"><a href="#" title="第二标题:萨迪斯的项圈的奇闻异事">第二标题:萨迪斯的项圈的奇闻异事</a></li>
                <li class="test"><a href="#" title="第三标题:杜斯的奇妙之旅。测试数据。测试数据">第三标题:杜斯的奇妙之旅。测试数据。测试数据 </a></li>
            </ul>
        </body></html>

    以上就是css ellipsis不起作用怎么办的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css ellipsis
    上一篇:css描边属性是什么 下一篇:css怎么实现首字母下沉效果
    第14期线上培训班

    相关文章推荐

    • css grid布局的优缺点是什么?• css3怎么让文字垂直居中显示• 如何解决myeclipse 8.5 css乱码问题• css怎么设置全屏背景图片

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网