小程序 margin-right无效，文字溢出？

先来看下盒子模型

   

box-sizing样式,告诉浏览器去理解你设置的边框和内边距的值是包含在width内

1.  设置了 box-sizing: border-box; 

• 盒子的宽度 = border + padding + width
• 盒子的高度 = border + padding + height
• 注意margin并没有算在这里面

#使用了 box-sizing: border-box; 实际这个容器的width = 100px;

.container2{
  width: 100px;
  background:yellow;
  height: 100px;
  padding:10px;
  box-sizing: border-box;
}

1. box-sizing: content-box;(默认)

      例如设置 width=100px ; padding:10px;实际容器的 width = 100 + 10 +10了

#使用了  box-sizing: content-box;(默认的可以不写); 实际这个容器的width = 100+10+10 px;

.container2{
  width: 100px;
  background:yellow;
  height: 100px;
  padding:10px;
  box-sizing: content-box;
}

小程序 margin-right无效？

在根结点中width=100%和margin:20px; 混用 导致的

width:100% 表示要占满手机屏幕，后面又设置了 margin:10px;
例如当前手机的width是400px 那么再margin:10。这样就溢出手机屏幕了
手机屏幕宽度 =  400px + 10px + 10px = 420 了。
这样一来就导致 margin-right总是没有效果之类的

.containerx{
  width: 100%;
  background:yellow;
  height: 100px;
  margin:10px;
  box-sizing: border-box;
}


解决，  width: 100% 去掉。 就可以
.containerx{
 
  background:yellow;
  height: 100px;
  margin:10px;
  box-sizing: border-box;
}

红色框框是实际的容器已经变成了这样。绿色箭头是超出部分。

黄色背景是手机屏幕。

文字溢出

.test{
overflow:hidden; 不能超出本容器。包括子容器。超出不显示
text-overflow:ellipsis; 显示省略号
white-space:nowrap; 不换行。也就是显示一行

}


一般的这样就可以了。但是有的情况他不会显示。或者是奇奇怪怪的。
这个时候要检查下是不是父容器本来就已经溢出手机屏幕了。