Rumah > hujung hadapan web > tutorial css > css ellipsis不起作用怎么办

css ellipsis不起作用怎么办

藏色散人
Lepaskan: 2020-11-20 11:41:58
asal
4012 orang telah melayarinya

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

css ellipsis不起作用怎么办

推荐:《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
Salin selepas log masuk

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>
Salin selepas log masuk

Atas ialah kandungan terperinci css ellipsis不起作用怎么办. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan