CSS Note 1.3 前缀及overflow

最新推荐文章于 2022-03-09 18:29:54 发布

LetsStudy

最新推荐文章于 2022-03-09 18:29:54 发布

阅读量265

点赞数

分类专栏： CSS Note 文章标签：前缀 overflow

本文链接：https://blog.csdn.net/LetsStudy/article/details/82763714

版权

CSS Note 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、常用浏览器前缀

-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>

五、效果

LetsStudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Note 1.3 前缀及overflow

一、常用浏览器前缀-webkit- /*webkit内核，代表浏览器Chrome/Safari*/ -ms- /*Trident内核，代表浏览器IE*/ -moz- /*Gecko内核，代表浏览器FireFox*/ -o- /*Presto内核，代表浏览器Opera*/二、使用示例/*如果需要兼容多个浏览器，可以把所有的浏览器的前缀都加上*/-webkit...
复制链接

扫一扫

专栏目录