CSS-文字控制在同一行显示-单个控件-多个控件-PC网页主体宽度兼容（不换行、不隐藏）
一、单个控件中的内容换行
text-align: end; width: 20%;display:inline-block;min-width: 35px;line-height:25px;
text-overflow:ellipsis; white-space:nowrap; //核心
核心1：white-space:nowrap;
核心2：min-width: 35px; //是用来控制换行的最小宽度 （未确定需要设置具体值还是比例）
text-align: end; //要根据实际需求
在有单词等情况下，换行默认的可能会有空格
设置 word-break: break-all;
二、由一个父类控件包裹多个子控件，缩放浏览器大小时子控件换行
（一般用于PC版网页中间主体部分）
pc端 body不要设置width:100%,会在浏览器大小宽度发生改变时 布局自动换行 而是要设置
min-width: 1196px; 子空间中有比例计算，但是父级（!!!仅仅针对第一级父类）使用100%等不确定的宽度时，浏览器发生改变时，子控件的宽度也会发生变化，导致子控件自动换行
核心1：min-width:xxxpx; （未确定需要设置具体值还是比例）
核心2：对于高分辨率的屏幕（1920 x 1080 及以上）需要使用最大max-width
min-width:可用于缩放网页时页面，页面结构出现混乱，设置min-width后可解决，层次越深的子控件越应该设置固定值！！
另外父级控件需要设置float:left ,否则缩放还是会混乱
三、一个控件中含有多个子控件横向排列，保证每个子控件都不拆分，控件不够，则子控件整体换行.
间距控制使用margin-right，不要使用margin-left，这个会在第三行开头有间距。
/设置在子元素上，前3句是核心/
word-wrap:break-word ;
word-break:break-all;
white-space:nowrap;
margin-right: 5px;
四、一个父控件含有一个多个子控件，每个子控件A又含有多个子控件B。默认需要子控件A左浮动水平并排，当子控件A中的子控件B内容宽度溢出时让子控件A变成垂直。
核心
父控件:width:100%;float:left ;
子控件A:min-width:50%;float:left ; //这里使用min-width，而不是width,否则不换行。
热门推荐
相关文章
近期评论
-
来自： 运维-docker专题-创建镜像-操作容器-制作jdk17的docker镜像等
-
来自： 留言板
-
来自： 留言板
-
来自： js-处理网页图片宽度自适应屏幕宽度
-
来自： 留言板
