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

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

0

1个回答

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

0
hurtCat
hurtCat 非常感谢,一直没找到症结
8 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
强制html元素不随窗口缩小而换行
div{ nwhite-space:nowrap; n} n强制div内的元素不随窗口缩小而换行本文出自 “点滴积累” 博客,请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1679366
如何防止Html元素随页面变小而换行
为Html元素所在容器添加css样式(white-space:nowrap)nnn
HTML-Table-Td固定宽度使内容换行
table style="TABLE-LAYOUT: fixed;" td style="WORD-WRAP: break-word;WIDTH:200px;"
糊糊的前端学习笔记——当缩放浏览器窗口时出现CSS样式混乱情况的分析【Day3】
在刚学会做自适应的时候,我们喜欢用百分比定义宽度,却会遇到这样一个现象,如果页面头部样式定义了宽度100%,那么当浏览器窗口缩放的时候就会发现有部分内容被截断或显示不全。rn解决:使用min-width对width:100%的对象加以限制;rn补充:在做不同设备下的自适应网页时,会发现这个方法非常好用,即在 css 中设定 min-width即可;rn@media (min-width: 768p
解决bootstrap4栅格布局缩放时,宽度超出导致换行
环境/工具: angular6+bootstrap4整合。n问题: 使用bootstrap栅格布局,由于有2个子内容需要显示,选用了2个col-md-6并排,但是浏览器缩放的时候会出现自动换行,这与栅格系统响应式布局的初衷是不符的。因为使用栅格系统是希望无论窗口如何缩放,col始终根据窗口内容自动调整宽度。n解决方法/结论: 使用col-x(如col-6)而非col-md-x(如col-md-6)...
缩小窗口时CSS背景图出现右侧空白BUG的解决方法
今天做电商网站出现了一个bug,给内容区设置了固定宽度为1000px,当缩窗口时,header 与 nav 的背景图竟然不是铺满整个浏览器窗口了。出现问题的原因是:当窗口缩小时,浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(1000px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的BUG。想要解决这类...
Bootstrap屏幕缩小时在导航栏下生成滚动条
相关说明:Bootstrap在进行响应式布局时,当屏幕缩小到一定程度时在导航栏下生成滚动条。主要代码:@media screen and (max-width:780px){n #product .product-list ul{width: 800px;flex-wrap: nowrap;}n #product .product-list ul li{width: 100px;}n ...
HTML边框大小调整时文本不自动换行的问题
在css中直接添加nnn<style>n body{n word-wrap:break-word; n word-break:break-all; n }n</style>nn表示整个页面中所有的文本都增加自动换行nn如果只是指定某一行的话,只需要将中间两行代码加到指定id下即可...
关于html界面缩小浏览器后,排版会变问题
这种问题也是经常遇到n解决的方法很多n我就跟大家分享一个最简单的实用的方法n在你所写的界面最外面一层加一个最大的盒子divn并设置它的:margin-left 和 margin-right 为 auto,再设置一次它的高度和宽度就行n比如这样:n#jk{nmargin-left: auto;nmargin-right: auto;nwidth:1920px;nheight:3050px...
HTML内容超出了div或p的宽度让内容自动换行
n n n width:100px;n word-wrap:break-word;n word-break:break-all;n overflow: hidden;nnn允许长单词换行到下一行:nword-wrap: normal|break-word;nnnnn值n描述nnnnnnormaln只在允许的断字点换行(浏览器保持默认处理)。n...
浏览器缩放时,页面布局发生变化
在网页中,如果一个元素没有设置最小宽度(min-width),这时当浏览器缩小到一定程度时,元素中的布局可能会发生变化。如果想要保持布局不变,可以给该元素(如div)设置最小宽度属性
Table 宽度超出页面宽度时,出现滚动条,单元格内容不换行实现
<div style='overflow:auto'>n <table style='white-space: nowrap'>n </table>n</div>nnn
CSS解决无序列表导航条随浏览器大小改变而窜行的方法
方法一:rnrn rnli 的width 属性百分比 % 而代替 PX等具体数值设置。rnrn这种方法的效果是导航条随浏览器的大小改变而与浏览器呈现相应比例的缩放rnrn rn方法二:rnrn rn在ul 外添加一个div层 或者直接设置ul 属性。rnrn设置ul或div属性 margin:0 auto;(使ul或div剧中),按照需求设置好ul或div得width和height。rnrn这种方...
设置背景图片随着浏览器缩放保持不变
图片是作为div背景存在的,div的width是100%,height是根据屏幕高度计算的。用这种方法只实现了浏览器缩放背景宽度上保持不变,但是高度变了background-image: url(../images/bg_1.jpg);nbackground-size: 100%;nbackground-repeat: no-repeat;以下是设置div高度的代码var changeBg = (f
inline-block导致换行问题
问题:nn// htmln<nav>n <a routerLink="/home">主页</a>n <a routerLink="/movies">电影</a>n <a routerLink="/music">音乐</a>n</nav&
html的内容超出了div的宽度,使内容自动换行
荆轲刺秦王今天遇到一个难题,如图:这样导致效果看起来非常不美观,我们最理想的状态应该是让 div 里面的内容如果超出 div 的宽度,就应该使内容换行显示。解决办法:首先我们要先确定 div 是有宽度的,然后在加上 css 样式:代码如下:word-wrap:break-word; word-break:break-all; overflow: hidden;   结果如下:这样就达到了我们想要的...
HTML+CSS布局时,明明宽度足够为何会换行
<div class="card-con">n <div class="card-shop-item"></div>n <div class="card-shop-item"></div>n <div class="card-shop-item"><
窗口缩小时图片、文字跟着整体缩小
.content_left{width:48.5%; float:left; padding:3% 3% 0px 0px; display:block;}rn.content_left img{min-width:100%;width:280px;vertical-align: middle;width:expression_r(document.body.clientWidth>100?"100
解决html网页缩放问题
当我们学习过div布局的时候,你肯定会有这样的疑问:为什么别人的网页无论怎么缩放都不会影响它的想对位置,而我的页面在使用浏览器对页面进行放大缩小的时候,有时候会出现错位,或者边框无法吻合。将页面缩小到最小时,页面内容将会堆砌在一起呢?n        首先出现这个问题的主要原因还是因为你对浮动、定位的理解不够透彻!下面我整理了几种解决的方案n方案(一):将width采用百分比设置n   虽然
html内容超出父级宽度给他设置自动换行
给父级添加word-wrap:break-word; word-break:break-all; overflow: hidden;/*这个参数根据需要来绝对要不要*/ 
【CSS】div中内容超过了div的宽度,但是不自动换行的解决办法
问题如上图nn解决办法:nn nnnword-wrap: break-word;nword-break: break-all;nn 
元素内容根据div大小自动换行
元素内容根据div大小自动换行
缩小浏览器窗口时背景样式消失的问题
n n n 饥人谷-陆恩泽n最近写页面的时候遇到一个bug(如下图所示),当我缩小浏览器窗口的时候出现了个bug,那就是右侧的背景图片和顶部导航条消失了变成了“白带”。这个问题以前没有遇到过(以前写的一些页面背景就是白色,所以可能掩盖了这个问题),这个页面布局时我设定了一个固定宽度的div, 预想效果是缩小浏览器的时候出现滚动条来展示页面。然而却发现这种恶心的东西,没...
使用js控制文字大小自动适应div不换行,div中文字字号自动调整大小以适应固定宽度
n//将文字从指定的字号范围逐个尝试,然后计算宽度跟预期的做比较,如果合适就终止,取当前的字号。n//resetFontSize($(".c2"), 190, 8, 17);nfunction resetFontSize(divWord, maxWidth, minSize, maxSize) {n divWord.css('font-size', minSize + "px");n for (v...
带滑动条的导航栏(下)---修复浏览器变窄后导航栏变成两条的BUG
前言rn  我在演示的过程中,突然发现了一个BUG,如下rn  rn  全屏时候,还能显示成一行,可缩小浏览器后,一行的浏览器就变成两行了,甚至更多行。rn原因rn  如下图,ul的父元素依次是nav-box 、 banner、body,而我在设置它们的时候,宽度都没有写成固定值,即body按照默认,banner的width为100%,nav-box的width为50%,如果将浏览器缩窄,假如此时
改变浏览器大小的时候 div浮动布局发生改变的问题。
目前看到有两种解决方法。第一种是规定好所在父div的width。这样的网页应用比较广泛,目前所见到的大部分网页都是采用的这种布局方式。例如百度、微博等。rn第二种是不太常用的一种方式,就是把浮动变成绝对定位,虽然布局在浏览器改变的时候整体上保持了功能的完整性,但是随着窗口尺寸的随意变化,仍然会产生一些意想不到的布局结果,所以一般采用第一种方式。也可以采用第一种和第二种方式相结合的方式。
左右布局页面 窗口缩小 页面自适应
额  这两天特别的尴尬 遇到这么一个页面  开始以为还蛮简单的 后来做的时候发现  我想的太简单了n大概要求是这样的:n图片纵向全屏  窗口缩小的时候 也是高度填充整个屏幕 右侧区域的距离自适应 达到一定的临界点的时候 就变小一定的尺寸 n图片如附件所示n这个页面 我的解决方法不是很好n我的方法是:n左边的图片:n 绝对定位 ,top:0, left:0 bottom:0;这样图片就
解决导航条占宽度让内容换行了
n n n 一个背景色为粉色的父模块的高度和宽度都为200px,子模块的宽度为100px,这样一行刚好可以放下两个,高度为50px。但是,如果当出现了八个以上,也就是四行以后,由于垂直方向的滚动条的出现,会占用到父模块的宽度,一行就不能放下两个子模块了,子模块会自动换行。如图所示:nnnnnn不知不觉换行了nn代码:n<!DOCTYPE html>n&lt...
做网页时如何使格式不随浏览器大小改变而是出现滚动条
Q:做网页时如何使格式不随浏览器大小改变而是出现滚动条? nA:网页中的代码指定宽度长度的地方都改成像素,而不是百分比,举例如下: n<table name="xxx" width="50%" height="30%" > n改成 n<table name="xxx" width="500" height="300" >Q: 那改成多少合适呢? nA:改成多少根据你的显示器分辨率是多少,如果你的是1
onresize()调整浏览器窗口时,使图片等控件自适应地变化大小
今天学习JS时,按照教程里如下代码实现“改变浏览器窗口的图片自适应问题”,但没有达到想要的效果,图片在改变浏览器窗口的时候越变越大,刷新页面后又恢复原大小。rnheight = (document.body.clientHeight-100)*0.9;ndocument.getElementById("imageID").style.height = height.toString()+"px";
如何使元素在浏览器缩小的时候不会出现留白?
1:代码nnn&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html&amp;gt;nn    &amp;lt;head&amp;gt;n        &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;n        &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;n        &amp;lt;!--&amp;lt;link rel=&quot;stylesheet&quot; type
HTML中P标签自动换行,浏览器补全P标签时的问题
在HTML5中p是块级元素。代表一个段落,段落里面的文字在达到右边界的时候会自动换行; n在页面中如果没有设置,会强制换行; n正确的书写:<p>我是一个p标签</p>如果书写的过程中没有加结束标签”/p”,浏览器会默认补全,这个时候p的补全时会产生一个问题比如一下代码:<!DOCTYPE HTML>n<html>n<head>n<meta charset="utf-8">n</head>n<bo
表格的td内容超过宽度后自动换行
##表格td内容自动换行 1和2都行1.normal=&quot;normal&quot; 2.style=&quot;word-wrap:break-word;word-break:break-all;&quot;3.nowrap=&quot;nowrap&quot; 不换行  不能和上面的一起用
使用媒体查询在屏幕宽度改变的时候实时更改样式
 媒体查询需要一层层查找下去修改,否则无效nn当屏幕宽度小于1024的时候,.time-box里头的.data内容被隐藏nnn &amp;lt;li class=&quot;time-box&quot;&amp;gt;n &amp;lt;div class=&quot;time&quot;&amp;gt;{{systemTime}}&amp;lt;/div&amp;gt;n &amp;lt;div class=&quot;date&quot;&amp;
div内部超过行宽如何换行
word-wrap:break-word;nnnn n 测试divn n n n HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHellon HelloHelloHelloHelloHelloHel
一个div宽高100px,点击变大,当它的宽高等于400px开始缩小,当宽高缩小至100px时,开始放大;再次点击暂定缩小或放大,再再次点击,div继续放大或缩小。
n&amp;lt;!DOCTYPE html&amp;gt;n&amp;lt;html&amp;gt;n&amp;lt;head lang=&quot;en&quot;&amp;gt;n &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;n &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;n&amp;lt;/head&amp;gt;n&amp;lt;body&amp;gt;n&amp;lt;div id=&quot;
当浏览器窗口大小改变时,设置显示内容的高度
//当浏览器窗口大小改变时,触发window.onresize事件nwindow.onresize=function(){n changeDivHeight();n}nfunction changeDivHeight(){n //宽度 n var ChiWidth=$(document).width() &lt; $('...
html背景图片自适应窗口大小
html 图片自适应窗口大小nbackground-size:covern会把图片拉伸至足够大,但是背景图片有些部分可能显示不全n#bgImg {n height: 100%;n width: 100%;n background: url('../img/bg/snow.jpg') no-repeat;n background-size: cover;n position: absolu...
html内容超出了div或p的宽度如何换行让内容自动换行
html内容超出了div或p的宽度如何换行让内容自动换行        代码如下:        html:        &amp;lt;div class=&quot;content&quot;&amp;gt;n asdasdasdasdasdasdassdsadsadsasadsadddfadasdasdasdasdasdasdasdassdsadsadsasadsadddfadasdas...
浏览器窗口大小改变时页面尾部 footer 可以以原来宽度随滚动条显示
今天在做前端页面时碰到一个问题,发现footer底部部分当改变浏览器窗口大小时(变小),底部的内容背景色看到的区域也变小了,滚动条向右拉动,右边留白了一部分,而左边的内容不能显示完整,就像下图这样:nnnnn想把它做成人家这样:nnnnn于是思考半天想出来解决方案,很简单,给body设置一个最小宽度的属性即可:nbody{n min-width: 1080px;n mar
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java中div学习 学习当产品经理