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

12个月前 (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 : 【 http://uuucd.cn/software/1866.html 】