原创

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,否则不换行。

正文到此结束
本文目录