CSS_01内容处理篇

作为一个前端切图仔，一定会遇到内页面布局的时候内容显示，太短或者太长，看着特别不舒服的时候，直接设置宽度？

下面介绍几种常见的解决方式

一、自动内容修改

1、 overflow-wrap

  /* CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。*/
  /*
  不做任何设置
  */
  #demo{
 	
 	}
 	 /*
  添加防止中断
  */
  #demo{
 	overflow-wrap:break-word;
 	}

2、Hyphens

/*CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。*/
/*
    不做任何设置
    */
    #demo{
   	
   	}
   	 /*
    添加防止中断
    */
    #demo{
     hyphens:auto;
   	}

二、内容截取

1、单行文本截取

/*截断是指在句子的末尾添加点，以表明有更多的文本内容。 */
  /*添加防止中断 */
  
  #demo{
        white-space: nowrap;
 	  overflow: hidden;
 		 text-overflow: ellipsis;
 	}

2、多行文本截取

/*要截断多个行，可以使用line-clamp属性。注意点文本不要设置padding，否则会出现文字显示一半的情况*/
#demo{
  display: -webkit-box;
 -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
   overflow: hidden;
}

三 、 水平滚动

/* 对于有的不适用换行隐藏的内容可以使用水平滚动*/
#demo{
	overflow-x:auto;
}

四、最小宽度或者最大宽度

/*对于同一个内容会出现显示不一致的情况看着特别的不好看，这里我们就可以用最小宽度或者最大宽度来处理*/
.buttom{
	min-width:80px;
}

五、内容偏移

/*第一种*/
#demo{
	margin-right:1rem
}

<div class="container">
  <div class="con-text">
    <h3 class="text">Ahmad Shadeed</h3>
  </div>
  <button class="btn">Follow</button>
</div>

/*第二种*/

.container{
  display: flex;
  align-items: flex-start;
}

.text{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.con-text{
  /* other styles */
  min-width: 0;
}

使用场景：
个人资料：内容隐藏
导航：设置最大或者最小宽度
手机端内容横向或者竖向滚动
文本中的内容偏移：