html中当浏览器宽度缩小时div的换行问题

div是块标签,默认情况下当浏览器宽度不足以显示全部元素,div就会占据多行来保证内容的显示
而我出现的问题是
1、宽度缩小到内容不足以显示的情况下,内标签出现了换行,div却没有换行
2、宽度缩小到内容不足以显示的情况下,超出边界的内容都不换行。
我想知道这三种效果是通过控制css的哪几个属性实现的

0

1个回答

1是 div设置了固定的 height
2是 div设置了 white-space: nowrap 或者固定的 width

0
hurtCat
hurtCat 非常感谢,一直没找到症结
7 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
强制html元素不随窗口缩小而换行
div{  white-space:nowrap;  }  强制div内的元素不随窗口缩小而换行本文出自 “点滴积累” 博客,请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1679366
HTML页面缩小后如何有横向滚动条
overflow:scroll; /*任何时候都强制显示滚动条*/overflow:auto; /*需要的时候会出现滚动条*/overflow-x:auto; /*控制X方向的滚动条*/overflow-y:auto; /*控制Y方向的滚动条*/示例: 测试表格内的滚动条 表格内的滚动条:style="position:absolute;height:200;width:200;overfl
浏览器窗口缩小,水平滚动条自动显示出来
最原始的代码:浏览器窗口缩小,水平滚动条不显示        主页面 body{   margin:0px;   width:100%;   height:100%;   background-color:#F0F0F0; } #head{   background-color:#FFFF00;   width:100%;   height:100px; }
糊糊的前端学习笔记——当缩放浏览器窗口时出现CSS样式混乱情况的分析【Day3】
在刚学会做自适应的时候,我们喜欢用百分比定义宽度,却会遇到这样一个现象,如果页面头部样式定义了宽度100%,那么当浏览器窗口缩放的时候就会发现有部分内容被截断或显示不全。 解决:使用min-width对width:100%的对象加以限制; 补充:在做不同设备下的自适应网页时,会发现这个方法非常好用,即在 css 中设定 min-width即可; @media (min-width: 768p
HTML边框大小调整时文本不自动换行的问题
在css中直接添加 <style> body{ word-wrap:break-word; word-break:break-all; } </style> 表示整个页面中所有的文本都增加自动换行 如果只是指定某一行的话,只需要将中间两行代码加到指定id下即可...
浏览器窗口小化时div相对位置不变
无论浏览器的窗口怎么变化,div的相对位置不变,position:relative;父div定义这个,然后再去用绝对定位跟相对定位,子div就是跟着父div的左上角了,如果不事先定义的话,那绝对定位跟相对定位只能相对于body来定位了!这样,当窗口缩小时,所有的div排列正常!        主页面 body{   margin:0px;   width:1350px;  
css/div做的连续的几个div水平浮动(float)时,当左右浮动的时候怎么当浏览器的窗口缩小的时候浮动的就往下跑了
注意:div 布局时用float时: css/div做的连续的几个div水平浮动(float)时,当左右浮动的时候怎么当浏览器的窗口缩小的时候浮动的就往下跑了 这是一定要在最外套的div要有固定的width才行。这样就绝对不会往下跑了
CSS解决无序列表导航条随浏览器大小改变而窜行的方法
方法一:   li 的width 属性百分比 % 而代替 PX等具体数值设置。 这种方法的效果是导航条随浏览器的大小改变而与浏览器呈现相应比例的缩放   方法二:   在ul 外添加一个div层 或者直接设置ul 属性。 设置ul或div属性 margin:0 auto;(使ul或div剧中),按照需求设置好ul或div得width和height。 这种方...
如何防止Html元素随页面变小而换行
为Html元素所在容器添加css样式(white-space:nowrap)
css防止ul下的li换行(li超出宽度变成…)代码
在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里   分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。 我需要的效果是4个li向左自动排列。当第三个li和前两个li的长度之和大于ul的宽度时候 第三个li则会下
html页面缩小后自动出现滚动条
导入这个style就行了,主要按需求设置一下body里面的属性。 body{   margin:0px;   width:100%;   min-width:1500px;   max-width:100%;   height:100%;   background-color:#F0F0F0; } #head{   background-color:#FFFF00;
CSS网页布局中DIV和TABLE超出宽度自动换行分析
CSS网页布局中DIV和TABLE超出宽度自动换行分析 html 部分 div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义div>    css  部分    #wrap{w
Bootstrap屏幕缩小时在导航栏下生成滚动条
相关说明:Bootstrap在进行响应式布局时,当屏幕缩小到一定程度时在导航栏下生成滚动条。主要代码:@media screen and (max-width:780px){ #product .product-list ul{width: 800px;flex-wrap: nowrap;} #product .product-list ul li{width: 100px;} ...
div随着浏览器窗口大小变更,改变大小(resize)
浏览器的放大缩小会导致网页布局变动,jquery的resize()方法,可以根据浏览器的窗口大小的变动,对网页进行操作:以下是div随着浏览器窗口大小变更,改变大小(resize)的案例:html:js效果:resizeDiv的块会根据网页变更,大小也随之改变...
CSS设置一行内文字超过宽度不换行
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。 一般的文字截断(适用于内联与块): ==============CSS================ .text-overflow{ display:block;/*内联对象需加*/ width:31e
使用媒体查询在屏幕宽度改变的时候实时更改样式
 媒体查询需要一层层查找下去修改,否则无效 当屏幕宽度小于1024的时候,.time-box里头的.data内容被隐藏 <li class="time-box"> <div class="time">{{systemTime}}</div> <div class="date"&
浏览器缩放时,页面布局发生变化
在网页中,如果一个元素没有设置最小宽度(min-width),这时当浏览器缩小到一定程度时,元素中的布局可能会发生变化。如果想要保持布局不变,可以给该元素(如div)设置最小宽度属性
左右布局页面 窗口缩小 页面自适应
额  这两天特别的尴尬 遇到这么一个页面  开始以为还蛮简单的 后来做的时候发现  我想的太简单了 大概要求是这样的: 图片纵向全屏  窗口缩小的时候 也是高度填充整个屏幕 右侧区域的距离自适应 达到一定的临界点的时候 就变小一定的尺寸  图片如附件所示 这个页面 我的解决方法不是很好 我的方法是: 左边的图片:  绝对定位 ,top:0, left:0 bottom:0;这样图片就
html的内容超出了div的宽度,使内容自动换行
荆轲刺秦王今天遇到一个难题,如图:这样导致效果看起来非常不美观,我们最理想的状态应该是让 div 里面的内容如果超出 div 的宽度,就应该使内容换行显示。解决办法:首先我们要先确定 div 是有宽度的,然后在加上 css 样式:代码如下:word-wrap:break-word; word-break:break-all; overflow: hidden;   结果如下:这样就达到了我们想要的...
设置背景图片随着浏览器缩放保持不变
图片是作为div背景存在的,div的width是100%,height是根据屏幕高度计算的。用这种方法只实现了浏览器缩放背景宽度上保持不变,但是高度变了background-image: url(../images/bg_1.jpg); background-size: 100%; background-repeat: no-repeat;以下是设置div高度的代码var changeBg = (f
html内容超出父级宽度给他设置自动换行
给父级添加word-wrap:break-word; word-break:break-all; overflow: hidden;/*这个参数根据需要来绝对要不要*/ 
div+CSS设置一行内文字超过宽度不换行且不显示
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。 一般的文字截断(适用于内联与块): ==============CSS================  .text-overflow{ display:block;/*内联对象需加*/ width:31em;
div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
1、方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视口宽高中较小的一个的百分比单位,同理 vmax是相对当前视口宽高中较大的一个的百分
一个div宽高100px,点击变大,当它的宽高等于400px开始缩小,当宽高缩小至100px时,开始放大;再次点击暂定缩小或放大,再再次点击,div继续放大或缩小。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="
缩小浏览器窗口右边出现空白
布局做好的页面不会因为缩小浏览器窗口而右边出现空白? [“发现现在缩小窗口,底部出现进度条,滑动至右边,就出现空白”]这个问题是个十分常见且容易忽略的bug。 原因是因为出现空白的元素设置了宽度100%,缩小窗口相当于减小了宽度值,那么为什么出现滚动条呢? 是因为页面中至少有一个元素a的width大于窗口的width,导致把页面撑开,出现了滚动条,而此时那个width
浏览器缩小 css布局乱了ok
“浏览器缩小 css布局乱了”,出现这种情况一般是这种情况:给元素设置了浮动,但没有清除浮动,比如     .f-left {         float:left;         width:500px;         height:200px;         border: 1px solid #4c9fff;     }     .f-right {
如何使元素在浏览器缩小的时候不会出现留白?
1:代码 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>         <!--<link rel="stylesheet" type
浏览器缩放造成的网页错位问题
1.li标签的内容自动换行
做网页时如何使格式不随浏览器大小改变而是出现滚动条
Q:做网页时如何使格式不随浏览器大小改变而是出现滚动条? A:网页中的代码指定宽度长度的地方都改成像素,而不是百分比,举例如下: <table name="xxx" width="50%" height="30%" > 改成 <table name="xxx" width="500" height="300" >Q: 那改成多少合适呢? A:改成多少根据你的显示器分辨率是多少,如果你的是1
HTML+CSS布局时,明明宽度足够为何会换行
&amp;lt;div class=&quot;card-con&quot;&amp;gt; &amp;lt;div class=&quot;card-shop-item&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div class=&quot;card-shop-item&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;div class=&quot;card-shop-item&quot;&amp;gt;&amp;lt;
HTML内容超出了div或p的宽度让内容自动换行
width:100px; word-wrap:break-word; word-break:break-all; overflow: hidden; 允许长单词换行到下一行: word-wrap: normal|break-word; 值 描述 normal 只在允许的断字点换行(浏览器保持默认处理)。 ...
浏览器窗口大小变化时css的变化
最近做一个项目,发现了点问题,贴出来分析分析 做一个页面,页面布局需要根据屏幕大小的变化而变化。代码大致如下 [code=&quot;html&quot;] 页面自适应 #main{min-width:940px;width:100%;height:505px;border:1px solid red;} #...
div内文字超过宽度时自动换行
div 设置宽度后 style加上 word-break:break-all; 或者 word-wrap:break-word; 区别:(http://zhidao.baidu.com/link?url=yx2WfaUWYrx0TrUFiOFYXuFh7G-bDWKMUC195o4PmUE-Bot_i8BroTXKijsw7OBAF4TARnTdwr8iJY4XItnw6_)
div固定宽度,文字输入超出盒子宽度,使文字自动换行
内容: 下图的显示评论列表固定宽,但是显示的内容超出的了div的宽,文本需要换行。 代码: 先给div一个宽度 固定宽度 word-wrap:break-word; word-break:break-all; overflow: hidden; ...
元素内容根据div大小自动换行
元素内容根据div大小自动换行
浏览器窗口大小改变时页面尾部 footer 可以以原来宽度随滚动条显示
今天在做前端页面时碰到一个问题,发现footer底部部分当改变浏览器窗口大小时(变小),底部的内容背景色看到的区域也变小了,滚动条向右拉动,右边留白了一部分,而左边的内容不能显示完整,就像下图这样: 想把它做成人家这样: 于是思考半天想出来解决方案,很简单,给body设置一个最小宽度的属性即可: body{ min-width: 1080px; mar
DIV+CSS展示文字超出后不换行
当一行文字超过div的宽度时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。  一般的文字截断(适用于内联与块):  ==============CSS================  复制代码代码如下: .text-overflow{  display:block;/*内联对象需加*/  width:
窗口缩小时图片、文字跟着整体缩小
.content_left{width:48.5%; float:left; padding:3% 3% 0px 0px; display:block;} .content_left img{min-width:100%;width:280px;vertical-align: middle;width:expression_r(document.body.clientWidth>100?"100
网页中 li 标签内元素 不换行的解决办法
修改li的样式,增加 white-space: nowrap; 在用 bootstrap-treeview 做右侧菜单,整个菜单的div宽度设为220px,加滚动。 当菜单级数增多时,垂直方向可以滚动,单水平方向却折行了,  并没有出现想象中的水平方向的滚动。 初步判定是li标签内元素宽度超过外部div限定的宽度时自动折行,因此水平方向的滚动没有触发,于是寻找禁止换行的css属性。
带滑动条的导航栏(下)---修复浏览器变窄后导航栏变成两条的BUG
前言   我在演示的过程中,突然发现了一个BUG,如下      全屏时候,还能显示成一行,可缩小浏览器后,一行的浏览器就变成两行了,甚至更多行。 原因   如下图,ul的父元素依次是nav-box 、 banner、body,而我在设置它们的时候,宽度都没有写成固定值,即body按照默认,banner的width为100%,nav-box的width为50%,如果将浏览器缩窄,假如此时
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java中div学习 学习当产品经理