css常见问题汇总

1. 如果我想显示两行文字第二行超出部分‘...’？

限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

2. 居中问题

http://www.cnblogs.com/Yirannnnnn/p/4933332.html

3. IOS手机滚动卡顿解决方案

在添加滚动监听的元素上添加一下的样式

overflow: auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

4. 利用 CSS 的 content 属性 attr 抓取资料

需求：鼠标悬浮实现一个提示的文字，例如 hover时显示完整的队员名称如图：

技巧： 使用为元素:after，通过attr获取，设置content

<div data-msg = "Open this file in Github Desktop">
  hover
</div>

div{
    width: 100px;
    border: 1px solid red;
    position: relative;
}

div:hover:after{
    content: attr(data-msg);
    position: absolute;
    font-size: 12px;
    width: 200%;
    line-height: 30px;
    text-align: center;
    left: 0;
    top: 25px;
    border: 1px solid green;
}

显示没有文本值但是 href 属性具有链接的 a 元素的链接：

a[href^='http']:empty::before {
    content: attr(href);
}

5. 元素自带的title属性 hover的时候设置上

cursor: pointer;

6. 一个块状元素包含一个img 这样的话 img 填充不满这个元素，解决办法将img设置成 display：block