当前位置:-go»- 网站首页 / 軟件应用區 / 正文

关于CSS样式中文字标题过长的处理方法

1年前 (2023-06-08) / 445 次围观 / 0 次吐槽

没使用之前的效果:


<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style type="text/css">
        li {
            list-style: none;
            border: 1px solid #f00;
            width: 150px;
            height: 25px;
            line-height: 25px;
        }

    </style>
</head>
<body>
    <ul>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
    </ul>
</body>
</html>


如下文字加深颜色的显示效果:


任务热污染语文而因

为一日未入而误入额

外有人因为




 使用后


<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style type="text/css">
        li {
            list-style: none;
            border: 1px solid #f00;
            width: 150px;
            height: 25px;
            line-height: 25px;

            white-space: nowrap;
        }

    </style>
</head>
<body>
    <ul>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
    </ul>
</body>
</html>


如下文字加深颜色的显示效果:


任务热污染语文而因 为一日未入而误入额外有人因为

 


 除非遇到br,才会折行,如:


<!DOCTYPE html>
<html>
<head>
   
    <title>Document</title>
    <style type="text/css">
        li {
            list-style: none;
            border: 1px solid #f00;
            width: 150px;
            height: 25px;
            line-height: 25px;

            white-space: nowrap;
        }

    </style>
</head>
<body>
    <ul>
        <li>任务热污染语文而因为</br>一日未入而误入额外有人因为</li>
        <!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
    </ul>
</body>
</html>



如下文字加深颜色的显示效果:


任务热污染语文而因为

 一日未入而误入额外有人因为




:如果希望多出来的部分不展示,则需要用到    overflow:hidden;


<!DOCTYPE html>
<html>
<head>
    
    <title>Document</title>
    <style type="text/css">
        li {
            list-style: none;
            border: 1px solid #f00;
            width: 150px;
            height: 25px;
            line-height: 25px;

            white-space: nowrap;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <ul>
        <li>任务热污染语文而因为</br>一日未入而误入额外有人因为</li>
        <!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
    </ul>
</body>
</html>


如下文字加深颜色的显示效果:


 任务热污染语文而因




 、溢出的部分用省略号代替:


<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style type="text/css">
        li {
            list-style: none;
            border: 1px solid #f00;
            width: 150px;
            height: 25px;
            line-height: 25px;

            white-space: nowrap;
            overflow: hidden;
            /* 溢出的部分用省略号代替 */
            text-overflow: ellipsis;
        }

    </style>
</head>
<body>
    <ul>
        <li>任务热污染语文而因为</br>一日未入而误入额外有人因为</li>
        <!-- <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li>
        <li>任务热污染语文而因为一日未入而误入额外有人因为</li> -->
    </ul>
</body>
</html>


如下文字加深颜色的显示效果:


任务热污染语文而…


更新: 2023-10-12

相關 普通日志

本筆記站部分文章、圖片收集於 互聯網,作者:僅作自學筆記;請勿轉載用於 非法途逕 , 轉載注明 _ 我欣飞祥
Url : 【 https://uuucd.cn/software/1866.html
额~ 本文暂时没人评论 来添加一个吧 …

发表评论

必填

选填

选填

必填

◎请提交您的留言_感谢您的参与讨论!!

ipcooc2@gmail.com