CSS 高度与宽度

2018-10-17  本文已影响0人  sxfshdf

文字的对齐

<style>
    div{
      border: 1px solid green;
    }
    span{
      border: 1px solid red;
      display: inline-block;
      width: 4em;
      text-align: justify;
      line-height: 20px;
      height: 20px;
      overflow: hidden;
    }
    span::after{
      content: '';
      display: inline-block;
      width: 100%
    }
</style>

<div>
    <span>姓名</span><br>
    <span>联系方式</span><br>
    <span>居住地</span>
</div>

word-break: break-all

<style>
  div{
    border: 1px solid green;
  }
</style>

<div>
  0
  111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
  2
  3
  4
</div>

发现文字超出了div的宽度,因为浏览器不会自动打断,可以添加连接符号‘-’,或者用 word-break: break-all;

<style>
  div{
    border: 1px solid green;
    word-break: break-all;
  }
</style>

单行溢出省略

<style>
  div{
    border: 1px solid red;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

多行溢出省略

<style>
  div{
    border: 1px solid red;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden;
  }
</style>

margin合并

margin 能否使父元素变高取决于父元素是否有东西挡住子元素,可以是 border ,
padding ,(overflow: hidden; 也可以,不建议使用)

如果一个div中包含一个div1,那么这个div的高度由内部的div1高度决定,即 div1高度 + padding + border + margin(看情况是否添加)

div 高度

div高度由内部文档流中元素的高度总和决定。
脱离文档流的方法:

上一篇 下一篇

猜你喜欢

热点阅读