【CSS】div中内容超过了div的宽度，但是不自动换行的解决办法

最新推荐文章于 2023-01-17 14:25:58 发布
最新推荐文章于 2023-01-17 14:25:58 发布
阅读量8.1k 收藏 3
点赞数 3
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37200686/article/details/80405211
版权
本文提供了一种解决文本换行问题的方法，通过调整CSS属性word-wrap和word-break，确保了在不同宽度的容器中文字能够正常换行，避免了内容溢出的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题如上图

解决办法：

 

word-wrap: break-word;
word-break: break-all;

 

CSS设置溢出不换行
2301_79326857的博客
09-29 968
默认情况下，overflow属性的值为"visible"，即允许内容溢出并显示在容器之外。然而，如果我们希望溢出的内容不换行，可以使用其他属性值。通过使用CSS的overflow属性，我们可以根据需要控制溢出内容的显示方式。这样，即使容器中的文本内容很长，我们也能够控制其不换行并提供合适的用户体验。在网页开发中，有时我们需要处理长文本或容器中的内容超出其指定的尺寸。为了避免内容溢出容器并换行显示，我们可以使用CSS属性来控制溢出的显示方式。当容器中的文本内容超出容器的尺寸时，
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加…
12-13
当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢？看到这个标题很容易就会想到截断文字加“…”的做法。 一般的文字截断(适用于内联与块)： =======...
html内容超出了div的宽度如何换行让内容自动换行
01-19
在工作中评论内容测试遇到评论着的评论内容为：“dddddddddddddddddddddddddddddddddddddddddddddddddd”，错误的评论，在显示评论列表的时候因为有固定宽，但是显示的内容超出的了div的宽，在这种情况下我们需要添加css为： 复制代码代码如下: word-wrap:break-word; word-break:break-all; overflow: hidden;/*这个参数根据需要来绝对要不要*/
CSS中设置了宽度，但是其中的内容溢出而不换行
cheng1a的博客
01-17 3589
当我们为div标签或者p标签等设置了宽度，会出现文本溢出并且不会换行的情况，一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。：内容到达指定宽度强行断句换行，一个单词显示不开将会截断换行继续展示；：当前单词在宽度内无法展示，整个单词换行展示；会将单词截断换行显示；
Html中div里面的文字太长不换行的问题！
Itmei的博客
08-10 3025
1.Html中div里面的文字太长不换行的问题！ 有时候div里面的值不是我们固定下来的，从后端回去到的字符串有长有短，很可能会影响到其他div内容布局，这个时候我们需要把width(宽度给规定下来)，height(高)给它设置成（auto），然后在div的style中添加 word-wrap: break-word; word-break: break-all; overflow: hidden; 如图所示: 这样设置完成后太长的会把宽度给占用满了后会自
div 内容不自动换行
zisetoufa
08-22 1064
jsp页面中需要用到div，但用了div之后，它后面的内容就会在下一行显示，如果想要它们在同一行显示，在div中设置一下就可以了。 第一种方式： 第二种方式： ...
html内容太大超过盒子范围,HTML内容超过div宽度不能自动换行解决方法
weixin_42394206的博客
06-05 2084
HTML内容超过div宽度不能自动换行解决方法HTML内容超过div宽度不能自动换行解决方法aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
div中英文无法自动换行的解决办法
12-11
但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。 原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个...
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...
09-25
当内容在容器内宽度不足以完整显示时，浏览器默认会将文字换行，但是有些时候我们不希望文字进行换行显示，而是希望超出容器宽度的部分不显示或者使用省略号来代替。对于这类需求，可以通过CSS来实现。 在CSS中，...
CSS 实现div宽度根据内容自适应
09-24
本文将详细介绍如何使用CSS来实现div宽度根据内容自适应。 首先，我们需要理解默认情况下，div元素作为块级元素，它的宽度会占据父元素的整个宽度，除非显式设置了宽度值。因此，如果希望div宽度自适应内容，我们...
如何让浮动层加margin后不换行-Div+CSS教程
wwwyan的专栏
04-13 2363
此文为网上收集~ 给客户做站的时候遇到的问题,div层加了margin后 总宽度超过父级层宽度 就自动换行了 如何让浮动层加margin后不换行呢?下面看浮动层加margin后换行的例子:比如说有个DIV宽度为380px，它里面有一个菜单列表，每个宽度为60px，margin-right为20px。如果就按照下面的HTML结构来做的话，那么这个菜单列表能在这个DIV里一行显
CSS内容超出DIV宽度后自动换行，显示省略号
UserGuan的博客
08-05 5453
内容超出DIV宽度后自动换行 word-wrap: break-word; word-break: break-all; overflow: hidden; 内容超出DIV宽度后显示省略号 单号 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行 word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-..
CSS实现单行或多行文本溢出容器时不换行并且自动填充省略’...‘符号
TylerYue的博客
06-27 423
css控制文本溢出
文本超出标签宽度不换行问题
m0_49774517的博客
11-25 326
文本超出标签宽度不换行问题 问题展示： css代码： 解决办法： 只需要加属性 ↓ -webkit-word-break: break-all; -moz-word-break: break-all; -ms-word-break: break-all; -o-word-break: break-all; word-break: break-all; 效果： 完美解决！ ...
CSS之长串字符超出盒子宽度不自动换行问题
bilibili233_的博客
07-11 2419
代码如上 子盒子里元素为英文单词/中文时会自动换行若改为长串字符则无法自动换行解决方法① 强制换行给r元素添加 此处使用word-wrap属性or word-break: break-all; 区别见另一篇文章 （断句点不同）https://blog.youkuaiyun.com/sdasadasds/article/details/125258991②将超出盒子的文字显示为省略号添加代码 ③多行文本溢出显示省略号暂未学习到 姑且放个链接（看了一眼兼容性较差）https://blog.youkuaiyun.com/
【CSS】解决flex布局下，子元素宽度超出父容器宽度后被压缩
weixin_42678675的博客
10-25 8238
1）实现子元素不压缩，超出宽度且在不显示滚动条的情况下能左右滚动 给每个子元素添加 flex-shrink: 0 父元素 overflow: auto 父元素伪类 father::-webkit-scrollbar { display : none } 2）代码 <div class="father"> <div class="son"></div> </div> <style> .father { width: 100%;
html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
weixin_33848693的博客
06-10 3981
这次给大家带来DIV设置width后超出父元素应该如何解决，解决DIV设置width后超出父元素的注意事项有哪些，下面就是实战案例，一起来看一下。前言本文介绍的是利用CSS3的新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题，有需要的朋友们可以参考借鉴。语法box-sizing: content-box|border-box|i...
flex弹性布局
Jy123_的博客
10-09 439
flex弹性布局 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，他已经得到了所 有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局是什么？ Flex是Flexible Box的缩写，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局 .box{ display: inline-flex; } Webkit内核的浏览器
子div超出父div部分横向滚动，不换行
weixin_51747462的博客
10-19 3925
子div超出父div部分横向滚动，不换行；overflow：auto失效；flex布局无法出现滚轮效果；
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值