CSS效果实现参考

文字溢出用省略号结尾，使有限区域内文字合理显示。

 /*单行*/
p{
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;/*规定当文本溢出时显示省略符号来代表被修剪的文本*/
    white-space:nowrap;
}
/*多行*/
p{
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;/*规定当文本溢出时显示省略符号来代表被修剪的文本*/   
 
    -webkit-line-clamp:2;/*两行文本*/
    display: -webkit-box;
    -webkit-box-orient:vertical;
    text-overflow:ellipsis;
}

页面页脚区域始终在屏幕最下方

效果示例如下，不管怎样调整页面大小，灰色背景的footer内容始终在页面底部，主要借助flex布局来实现：

代码实现参考：

 <!DOCTYPE html>
<html lang="zh-cn">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通用页脚示例</title>
    <style>
        
        /*页脚*/
        /*将footer始终显示在页面底部，不管页面其它内容够不够占满一屏的高度*/
        html{
            height: 100%;
        }
        body{
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }
        main{
            border: 2px solid pink;
            padding: 15px; 
            border-radius: 10px;
            flex: 1;/*这个是关键，让其占满剩余页面空间。其它的同级flex-item的flex-grow默认为0，既不缩小也不放大。*/
        }
        /*页脚区域元素布局*/
        .footer-simple{
            background-color: darkgray;
            font-size: 16px;
        }
        .footer-simple a{
            text-decoration: none;
            color: black;
        }
        .footer-main{
            text-align: center;
            padding: 50px 0 10px 0;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }
        .footer-main div{
            padding: 5px;
            border-radius: 10px;
            background-color: white;
            text-align: center;
            border: 2px solid darkgray;
        }
        .footer-main img{
            width: 150px;
        }
        .footer-simple a:hover{
            color: blue;
        }
        .footer-main div:hover{
            border: 2px solid pink;
        }
        .footer-main a{
            display: inline-block;
            text-align: center;
        }
        .footer-links,.footer-copyright{
            text-align: center;
            padding-bottom: 15px;
        }
        .footer-copyright{
            padding-bottom: 30px;
        }
        
    </style>
</head>
 
<body>
 
    <h1>I'm a good boy !!!</h1>
    <main>
        <section >
            <div class="viewpoint">
                <p>不管黑猫白猫，能抓到老鼠就是好猫。</p>
                <p>解决bug是程序员的日常。</p>
                <p></p>
            </div>
        </section>
    </main>
 
    <footer class="footer-simple">
        <div class="footer-main">
            <a href="http://hongqi.faw.cn/" target="_blank">
                <div>
                    <img src="http://www.faw.com.cn/fawcn/template/common/image/footer/qrcode-zgyq.png" alt="">
                </div>
                <p>中国一汽</p>
            </a>
            <a href="http://hongqi.faw.cn/" target="_blank">
                <div>
                    <img src="http://www.faw.com.cn/fawcn/template/common/image/footer/qrcode-zgyq.png" alt="">
                </div>
                <p>红旗</p>
            </a>
            <a href="http://hongqi.faw.cn/" target="_blank">
                <div>
                    <img src="http://www.faw.com.cn/fawcn/template/common/image/footer/qrcode-zgyq.png" alt="">
                </div>
                <p>解放</p>
            </a>
        </div>
        <div class="footer-links">
            <a href="https://www.baidu.com">联系我们</a> | 
            <a href="/fawcn/fzlm/373767/index.html">相关链接</a> | 
            <a href="/fawcn/fzlm/373769/index.html">网站声明</a> | 
            <a href="/fawcn/fzlm/373773/index.html">常见问题</a> |
            <a href="/fawcn/fzlm/373775/index.html">留言板</a>
        </div>
        <div class="footer-copyright">
            <a href="https://beian.miit.gov.cn/" target="_blank">吉ICP备17008829号-1</a> 
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=22017102000237" target="_blank"><img src="http://www.faw.com.cn/fawcn/template/common/image/beian.png" alt=""> 吉公网安备 22017102000237号</a> 
            <span>©2020中国第一汽车集团有限公司 版权所有</span>
        </div>
    </footer>
</body>
 
</html>

更新于：2023-4-8

posted @ 2023-04-01 15:08 AI大胜阅读(15) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS总复习（二）一些属性介绍

· 媒体查询、视口viewport和meta标签、flex布局

· CSS宝典②-常用CSS样式属性

· css实现文本溢出显示省略号

· 使用 CSS 实现文本溢出省略号显示

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称： AI大胜
园龄： 8年6个月
粉丝： 3
关注： 17

+加关注

2025年3月

日

一

二

三

四

五

六

AI大胜

永远相信，美好的事情将会发生！@idasheng

CSS效果实现参考

文字溢出用省略号结尾，使有限区域内文字合理显示。

页面页脚区域始终在屏幕最下方

公告

搜索

最新随笔

积分与排名

随笔分类 (61)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	/单行/
	p{
	width:200px;
	overflow:hidden;
	text-overflow:ellipsis;/规定当文本溢出时显示省略符号来代表被修剪的文本/
	white-space:nowrap;
	}
	/多行/
	p{
	width:200px;
	overflow:hidden;
	text-overflow:ellipsis;/规定当文本溢出时显示省略符号来代表被修剪的文本/

	-webkit-line-clamp:2;/两行文本/
	display: -webkit-box;
	-webkit-box-orient:vertical;
	text-overflow:ellipsis;
	}

	<!DOCTYPE html>
	<html lang="zh-cn">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>通用页脚示例</title>
	<style>

	/页脚/
	/将footer始终显示在页面底部，不管页面其它内容够不够占满一屏的高度/
	html{
	height: 100%;
	}
	body{
	min-height: 100%;
	display: flex;
	flex-direction: column;
	}
	main{
	border: 2px solid pink;
	padding: 15px;
	border-radius: 10px;
	flex: 1;/这个是关键，让其占满剩余页面空间。其它的同级flex-item的flex-grow默认为0，既不缩小也不放大。/
	}
	/页脚区域元素布局/
	.footer-simple{
	background-color: darkgray;
	font-size: 16px;
	}
	.footer-simple a{
	text-decoration: none;
	color: black;
	}
	.footer-main{
	text-align: center;
	padding: 50px 0 10px 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	}
	.footer-main div{
	padding: 5px;
	border-radius: 10px;
	background-color: white;
	text-align: center;
	border: 2px solid darkgray;
	}
	.footer-main img{
	width: 150px;
	}
	.footer-simple a:hover{
	color: blue;
	}
	.footer-main div:hover{
	border: 2px solid pink;
	}
	.footer-main a{
	display: inline-block;
	text-align: center;
	}
	.footer-links,.footer-copyright{
	text-align: center;
	padding-bottom: 15px;
	}
	.footer-copyright{
	padding-bottom: 30px;
	}

	</style>
	</head>

	<body>

	<h1>I'm a good boy !!!</h1>
	<main>
	<section >
	<div class="viewpoint">
	<p>不管黑猫白猫，能抓到老鼠就是好猫。</p>
	<p>解决bug是程序员的日常。</p>
	<p></p>
	</div>
	</section>
	</main>

	<footer class="footer-simple">
	<div class="footer-main">
	<a href="http://hongqi.faw.cn/" target="_blank">
	<div>
	<img src="http://www.faw.com.cn/fawcn/template/common/image/footer/qrcode-zgyq.png" alt="">
	</div>
	<p>中国一汽</p>
	</a>
	<a href="http://hongqi.faw.cn/" target="_blank">
	<div>
	<img src="http://www.faw.com.cn/fawcn/template/common/image/footer/qrcode-zgyq.png" alt="">
	</div>
	<p>红旗</p>
	</a>
	<a href="http://hongqi.faw.cn/" target="_blank">
	<div>
	<img src="http://www.faw.com.cn/fawcn/template/common/image/footer/qrcode-zgyq.png" alt="">
	</div>
	<p>解放</p>
	</a>
	</div>
	<div class="footer-links">
	<a href="https://www.baidu.com">联系我们</a> \|
	<a href="/fawcn/fzlm/373767/index.html">相关链接</a> \|
	<a href="/fawcn/fzlm/373769/index.html">网站声明</a> \|
	<a href="/fawcn/fzlm/373773/index.html">常见问题</a> \|
	<a href="/fawcn/fzlm/373775/index.html">留言板</a>
	</div>
	<div class="footer-copyright">
	<a href="https://beian.miit.gov.cn/" target="_blank">吉ICP备17008829号-1</a>
	<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=22017102000237" target="_blank"><img src="http://www.faw.com.cn/fawcn/template/common/image/beian.png" alt=""> 吉公网安备 22017102000237号</a>
	<span>©2020中国第一汽车集团有限公司版权所有</span>
	</div>
	</footer>
	</body>

	</html>