Home >Web Front-end >CSS Tutorial >What to do if css ellipsis doesn't work

What to do if css ellipsis doesn't work

藏色散人
藏色散人Original
2020-11-20 11:41:314010browse

Solution to css ellipsis not working: First open css; then add the properties "text-overflow:ellipsis" together with "overflow:hidden;" and "white-space:nowrap;width:150px;" Just use it.

What to do if css ellipsis doesn't work

Recommendation: "css video tutorial"

Solution to Css attribute text-overflow: ellipsis does not work (text overflow displays ellipses)

Make text-overflow:elipsis work:

If you want to use the css attribute text-overflow:elipsis to work, the style must Use with overflow:hidden; white-space:nowrap;width:150px;

1. Text-overflow syntax:

text-overflow : clip | ellipsis

2. Text-overflow parameter description:

clip: Do not display the omission mark (...), but simply crop it

elipsis: Display the omission mark (...) when the text in the object overflows

3. Simple Use:

<!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>

The above is the detailed content of What to do if css ellipsis doesn't work. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn