美文网首页
CSS小套路

CSS小套路

作者: 饥人谷_小侯 | 来源:发表于2017-10-25 22:53 被阅读0次

1.中文左右对齐

span{
      padding-top:8px;
      padding: 4px;
      display: inline-block;
      width: 5em;
      text-align: justify;
      overflow: hidden;
      height: 20px;
    }
    span::after{
      content: '';
      display: inline-block;
      width: 100%;

2.使文档中的单词遇见换行折断:

word-break: break-all

3.单行文本溢出省略:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

4.多行文本溢出省略:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

5.如何制作一个1:1的div:

.box  {
     border: 1px solid red;
     padding-top: 100%;
}

相关文章

  • CSS小套路

    1.中文左右对齐 2.使文档中的单词遇见换行折断: word-break: break-all 3.单行文本溢出省...

  • 简历制作过程之CSS(续集2)

    上节课最后讲到了css的套路图形~~~// css tricks 网站有很多套路的图形,而且有直接的代码 多看多模...

  • CSS常用套路

    a标签去除原颜色(改为白色)和下划线 text-decoration: none; color: #ffffff;...

  • CSS布局套路

    CSS布局 布局套路 浮动布局 宽度百分比浮动布局http://js.jirengu.com/yobiq/1/ed...

  • CSS布局套路

    这篇笔记的目的是记录分别应用float和flex布局的方法。主要是对遇到的问题进行总结。 1.float布局 总结...

  • CSS 布局套路

    一、布局流程 二、布局原则 尽量不要写死width和height 尽量使用高级语法,如calc、nth-child...

  • CSS布局套路

    原则 1.不到万不得已,不要写死 width 和 height 成固定数值2.如果支持 IE8,就用 Float ...

  • 【CSS】学习链接

    用了各种ui组件后,自己css样式都不会写了。 这里记录链接供自己学习用 我写CSS的常用套路 灵活运用CSS开发...

  • css相关收集

    1.垂直居中2.几种常见的CSS布局3.CSS实现一个粒子动效的按钮4.我写CSS的常用套路(附demo的效果实现...

  • 小奶狗给小喵咪上CSS课程

    小奶狗给小喵咪上CSS课程 小奶狗,你好啊? 小喵咪你好~ 听说学习HTML,要学习CSS是吗? 是的,小甜心~ ...

网友评论

      本文标题:CSS小套路

      本文链接:https://www.haomeiwen.com/subject/wvocpxtx.html