html div 内容横向溢出 css处理方法

最新推荐文章于 2023-02-01 11:38:30 发布
最新推荐文章于 2023-02-01 11:38:30 发布
阅读量3.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aikongmeng/article/details/83752742
版权

上图是内容溢出的表现. 

怎么办? 添加 一个css 属性  即可让长文本换行显示. 

word-wrap:break-word;

也可以使用下面的属性:

word-break: break-all;
word-break 值描述
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
word-wrap 值描述
normal只在允许的断字点换行（浏览器保持默认处理）。
break-word

在长单词或 URL 地址内部进行换行。

 

参考:菜鸟教程

aikongmeng
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div中文字内容溢出常见的解决方法
08-31
本文主要介绍了div中文字内容溢出常见的解决方法。具有很好的参考价值。下面跟着小编一起来看下吧
div横向超出可滚动，自动添加滚动条，自定义滚动条样式，
海贼王某人的博客
05-11 1万+
先看一下最终的效果图吧： 第一种文字内容超出显示滚动条： 父盒子：横向超出滚动：overflow-x: scroll; .box { width: 100%; box-sizing: border-box; overflow-x: scroll; } 子盒子：内容不换行 white-space:nowrap; .item { white-space:nowrap; } 实现效果，超出滚动：如下图： 这个会发现即使内容没超出还是有滚动条占位如下图： 这里吧**overflow-x:
div溢出内容
zhangzhiming01的专栏
09-03 761
标题：         摘要:         内容：         关键字个数：         关键字：                           您所选择的题目是美国各界人士强烈批评美限制中国纺织品进口 此文章包含关键词进口,纺织品,中国,限制,批评 以上关键词对应权重为5.991,2.996,0.693,2.996,2.996 此文
html横向超出,怎么让超出div宽度的元素横向滚动?_html/css_WEB-ITnose
weixin_31885123的博客
06-10 770
怎么让超出div宽度的元素横向滚动?回复讨论(解决方案)设置容器div的css样式横向滚动 overflow-y:auto;纵向滚动 overflow-x:auto;当然你还得设置容器div的宽度。设置overflow属性试试设置overflow属性试试#tar1, #tar2, #tar3 { width: 540px; height: ...
div中文本不换行溢出问题及解决
weixin_46145958的博客
07-22 2285
div中文本不换行溢出问题及解决 1. 问题及说明 当一个设置好宽和高的盒子中，写入一串纯数字（无空格）或者一串纯英文字母（无空格）时，会出现文本在盒子中单行溢出，不会自动转行： <div> hellohellohellohellohellohellohellohellohello </div> <div> 123456789123456789123456789123456789123456789 </div> 这可能是因为，浏览器再解析div中的文本
在HTML中width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？
小董同学西北民族
10-16 1188
题目 width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？ 分析 因为传统的代码： .box3{ width: 50%; height: 50%; background-color: aqua; border: 1px solid black; float: left; } 会导致溢出，所以这时我们加上代码：box-sizing: border-box; 原本代码变为： .box2{ width: 50%; height: 50%; background-colo
内元素宽度设为100%为什么会超出外元素
大华阿大华的博客
10-14 4692
前言 一个元素(外元素)嵌套着另一个元素(内元素)，外元素固定宽度，内元素宽度设置为 100%，但是内元素却溢出了，如图： 看下代码，来分析下什么原因造成的： <style type="text/css"> .wrap { width: 500px; height: 500px; background-color: #ccc; margin: 30px auto; } .inner { width: 100%; height: 300px;
html方框内文字溢出处理,html 解决div中文字内容溢出问题
weixin_30301989的博客
06-03 2365
这篇文章主要为大家详细介绍了html 解决div中文字内容溢出问题，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！由于文字内容的长度不确定性和页面布局的固定性，常常会遇到文字溢出的状况，有一下解决方法：1：规定文字父容器的宽高，设置超出隐藏：overflo：“hidde”-------缺点是会经常遇到最后一行文字显示不全的情况，建议在只控制一行文...
小技巧处理div内容溢出
10-25
主要介绍了小技巧处理div内容溢出的方法,需要的朋友可以参考下
CSS 实现div宽度根据内容自适应
09-24
最近做了个项目，其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识，需要的朋友参考下
vuejs数据超出单行显示更多，点击展开剩余数据实例
10-17
主要介绍了vuejs数据超出单行显示更多，点击展开剩余数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html 表格比较宽溢出的解决方法
09-28
主要介绍了html 表格比较宽溢出的解决方法，表格如果比较宽，则有可能溢出，所以下面的方法，大家可以看看
div+css布局中选择使用html标签的方法
12-13
这里为大家简单介绍在DIV+CSS布局中如何选择HTML标签： 1、框架布局（使用DIV标签）在网页中框架布局一般使用DIV布局，无论大小DIV盒子一般均使用DIV标签（<div> </div>）布局。 2、列表型布局（使用ul li标签）遇到...
关于html页面中头部navbar设置fixed绝对定位后，width 100% 会溢出覆盖滚动条
qq_44745931的博客
06-09 2373
关于html页面中头部navbar设置fixed绝对定位后，width 100% 会溢出覆盖滚动条 情况如下图： 头部覆盖住了滚动条 我遇到的情况分析： 前提： 头部和中间主体部分都在一个大的div元素下面，当头部采用fixed布局，中间主体部分没有采用定位且其高度超出父元素的高度时，会溢出导致滚动条的出现。 分析：此时滚动条是相对父元素出现的，不是相对于整个body的，而fixed定位是相对于整个浏览器窗体也就是body定位的，所以fixed定位的头部会压住滚动条。为了解决这个问题，就需要使滚动条是相对
html溢出左右滚动,怎么让超出div宽度的元素横向滚动?_html/css_WEB-ITnose
weixin_39962125的博客
06-03 705
怎么让超出div宽度的元素横向滚动?回复讨论(解决方案)设置容器div的css样式横向滚动 overflow-y:auto;纵向滚动 overflow-x:auto;当然你还得设置容器div的宽度。设置overflow属性试试设置overflow属性试试#tar1, #tar2, #tar3 { width: 540px; height: ...
css+div如何解决内容的溢出
热门推荐
scalad
03-13 1万+
平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。 特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候我们可以利用以下解决方法。 解决CSS样式          
CSS 内容溢出 超出 div 设置及使用方法 overflow
YDOOK
08-19 1414
使用 overflow 样式属性定义 overflow 全部属性： visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 定义：内容会被修剪隐藏，并且多出的内容是不可见的。 scroll 定义：内容会被修剪隐藏，但是浏览器会显示滚动条，可以通过滚动条查看其余的内容。 auto 定义：如果浏览器自动地选择显示滚动条以便查看其余的内容。 inherit 定义：从父元素继承 ov...
HTML文本溢出处理
FreshManCode的博客
12-01 1525
有时在做某些需求布局时,需要处理文本溢出时的情况,如果不处理可能会重新重叠的效果,关于设置文本溢出,主要就是多行/单行的处理
css：尺寸和溢出
m0_61610374的博客
02-01 100
尺寸和溢出
css多行文本溢出省略号
最新发布
04-24
怎么实现？ 可以通过设置 CSS 属性来实现多行文本省略号溢出。具体实现方法如下： 1. 设置容器高度和 overflow 属性，使容器内文本溢出时出现滚动条 ```css .container { height: 200px; overflow: auto; } ``` 2. 设置文本样式，包括文本溢出时的省略号以及行数 ```css .text { white-space: nowrap; /* 文本不换行 */ text-overflow: ellipsis; /* 溢出省略号 */ overflow: hidden; /* 溢出隐藏 */ display: -webkit-box; /* 显示为弹性盒子 */ -webkit-line-clamp: 3; /* 行数为3行 */ -webkit-box-orient: vertical; /* 设置横向溢出时垂直显示 */ } ``` 其中，-webkit-box- 系列属性是为了兼容旧版 Safari 和 iOS 系统中的浏览器。 3. 将文本放置在容器内 ```html <div class="container"> <div class="text"> 多行文本省略号实现 </div> </div> ``` 这样，当文本超出容器高度时，就会显示省略号。而通过设置 -webkit-line-clamp 属性，还可以控制文本的行数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值