文字溢出

最新推荐文章于 2024-07-11 13:54:14 发布

zmj2051176726

最新推荐文章于 2024-07-11 13:54:14 发布

阅读量110

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/102703703

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文字溢出容器，要打点展示
在这里插入图片描述
一.多行文本pc端目前没有什么好的技术，只能告诉后端我这最多能传多少文字；但在移动端可以css3实现。
pc端截断就行了（overflow: hidden），即溢出的不展示
可以展示的行数=height/line-height(总高度除以行高)，一定要是整数。

<style>
    p{
        width:500px;
        border: 1px solid black;
        height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
</style>
<body>
<p>Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性</p>
</body>

在这里插入图片描述
二.而单行文本有三件套来实现打点展示。
单行文本文字溢出现象

<style>
    p{
        width:500px;
        border: 1px solid black;
        height: 20px;
        line-height: 20px;
    }
</style>
<body>
<p>Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性</p>
</body>

在这里插入图片描述
二.打点展示的解决步骤
1.首先让文本不要换行（white-space: nowrap;）

<style>
    p{
        width:500px;
        border: 1px solid black;
        height: 20px;
        line-height: 20px;
        white-space: nowrap;
    }
</style>
<body>
<p>Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性</p>
</body>

在这里插入图片描述
2.让多出来的不要显示（overflow: hidden）

<style>
    p{
        width:500px;
        border: 1px solid black;
        height: 20px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
    }
</style>
<body>
<p>Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性</p>
</body>

在这里插入图片描述
3.溢出文本用…显示（text-overflow: ellipsis）

<style>
    p{
        width:500px;
        border: 1px solid black;
        height: 20px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
<p>Web前端开发工程师，除了主要职责外，还要为网站上提供的产品和服务实现一流的Web界面，优化代码并保持良好兼容性</p>
</body>

在这里插入图片描述
以上则实现了单行溢出文本打点展示功能。
注意：很多网站单行文本都实现了此功能，以防溢出。