Effects that can be achieved with CSS, and a few small problems to solve

Preface : CSS can be said to be the soul of web page styles, especially after the release of CSS3, it allows web pages to directly use CSS to achieve effects that were previously impossible without JS. Based on daily development experience, this article summarizes several effects that can be achieved by using CSS, as well as several small problems and methods to solve them

Effects that can be achieved with CSS

1. The child element is hidden beyond the parent element, and you can swipe left and right to view the hidden content (used on the mobile terminal)

Effect picture:

HTML code:

 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS code:

 ul{
    list-style: none;
    padding: 0;
    border: 2px solid #999;
    width: 100%;
    white-space: nowrap;/*该属性使子元素li不换行，一行排列。即使超出父元素也不换行*/
    overflow: auto;/*超出父元素的那部分子元素隐藏，且可通过滑动查看被隐藏部分*/
}

ul li{
    background-color: blue;
    display: inline-block;/*这里的子元素li，需要转化为内联块元素*/
    border-radius: 30%;
    margin: 2%;
    width: 100px;
    height: 100px;
}

2. CSS realizes the effect of text beyond the display ellipsis (you can specify several lines to display)

Effect picture:

show a line

show two lines

HTML code:

 <div class="text">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</div>

CSS code:

 .text {
      width:300px;
      border: 1px solid #ccc;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp:1;/*要显示的行数*/
      -webkit-box-orient:vertical;
}

Several small problems with CSS and solutions

1. The img tag of the child element under the div is different in height from the parent element, leaving a small gap

Effect picture:

Problem: There is a small gap between the height of the child element and the parent element

Make the two heights the same, the solution: put the img tag display:block

2. How to keep the same horizontal line of the child element span and img in the parent element

Effect picture:

Problem: span and img do not have the same horizontal height alignment

Workaround: use vertical-align: top in span

at last

I think the article is good, give me a like wow, pay attention!
For technical exchanges, you can pay attention to the WeChat public account [GitWeb], and add my friends to discuss the WeChat communication group: add friends (remarks) to invite you to join the group, learn together and make progress together