CSS Note 1.3 前缀及overflow

最新推荐文章于 2024-05-01 03:57:35 发布

原创最新推荐文章于 2024-05-01 03:57:35 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前缀 #overflow

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了浏览器前缀及其在不同浏览器中的应用，并深入探讨了CSS溢出属性的使用方法，包括visible、hidden、scroll、auto等选项，以及如何结合white-space和text-overflow实现内容的优雅展示。

一、常用浏览器前缀

-webkit- /*webkit内核，代表浏览器Chrome/Safari*/
    -ms- /*Trident内核，代表浏览器IE*/
    -moz- /*Gecko内核，代表浏览器FireFox*/
    -o- /*Presto内核，代表浏览器Opera*/

二、使用示例

/*如果需要兼容多个浏览器，可以把所有的浏览器的前缀都加上*/
-webkit-align-items: flex-start;
mso-text-raise: 20px;

三、内容溢出

/*visible不裁剪内容，内容会显示在框外
hidden裁剪内容，不提供滚动
scroll内容提供滚动，不论内容是否超出
auto内容超出才提供滚动，不超出则不提供
overflow-y对上下进行处理
overflow-x对水平方向进行处理
ellipsis省略
text-overflow需要与overflow:hidden和white-space:nowrap配合使用,超出的内容显示省略号*/

四、示例

CSS样式
div{
    border: 2px;
    width: 100px;
    height: 200px;
    background: aqua;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}

HTML页面
<body>
    <div>-webkit- /*webkit内核，代表浏览器Chrome/Safari*/
        -ms- /*Trident内核，代表浏览器IE*/
        -moz- /*Gecko内核，代表浏览器FireFox*/
        -o- /*Presto内核，代表浏览器Opera*/</div>
</body>

五、效果