html-文本超出范围以省略号显示

最新推荐文章于 2025-06-10 12:41:12 发布

cnkeysky

最新推荐文章于 2025-06-10 12:41:12 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css 文章标签： html

本文链接：https://blog.youkuaiyun.com/cnkeysky/article/details/86743515

html/css 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS进行网页布局的方法，包括如何设置页面元素的宽度、高度、边框、内边距和外边距，以及如何利用CSS3的特性实现文本溢出省略显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>HelloWorld</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            width: 240px;
            height: 30px;
            border: 1px solid red;
            margin: 5px;
            font-size: 16px;
            /* white-space overflow text-overflow 缺一不可 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>文本内容文本内容文本内容文本内容文本内容</li>
        <li>文本内容文本内容文本内容文本内容文本内容</li>
    </ul>
</div>
</body>
</html>