flex布局时，文字超长没有换行显示

最新推荐文章于 2025-01-13 13:56:04 发布
最新推荐文章于 2025-01-13 13:56:04 发布
阅读量1.2k 收藏 6
点赞数 3
分类专栏： 关于前端 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41285537/article/details/129954544
版权

在这里插入图片描述
form表单中的item
在这里插入图片描述
content部分的内容为一段文字

在这里插入图片描述
使用span标签包裹了一段纯文字，此时宽度不够，文字没有换行显示

原因：
长数字和长字母被认为是一个单词，浏览器不会对一个单词自动分割换行

解决办法：
给span标签添加样式，使文字换行

word-break: break-all;
CSS进阶-第二篇：深入 CSS 布局-Flexbox 布局（二）：换行与对齐属性
无
04-10 113
stretch：这是的默认值（当项目在交叉轴方向上没有设置固定高度或宽度时）。Flex 项目会在交叉轴方向上拉伸，以填满容器的整个交叉轴空间。flex-start：Flex 项目会在交叉轴的起始位置对齐。例如，如果交叉轴方向是垂直方向（当为row时），项目会顶部对齐。flex-end：与flex-start相反，Flex 项目会在交叉轴的结束位置对齐。垂直方向上就是底部对齐。center：Flex 项目会在交叉轴上居中对齐。例如在水平导航栏中，按钮在垂直方向上居中显示。baseline。
解决flex布局，warp换行水平两端对齐内容不从左到右顺序排列问题
高桥留de博客
09-07 702
解决flex布局，warp换行水平两端对齐内容不从左到右顺序排列问题
CSS强制英文、中文换行与不换行
ld_flex的专栏
12-07 1986
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义 css #wra
CSS——flex 布局设置文字不自动换行（固定元素不被挤压）
qq_43201350的博客
04-05 2240
CSS——flex 布局设置文字不自动换行（固定元素不被挤压）
flex布局文本不换行
yuyangll的博客
05-16 6105
在使用flex布局进行写页面时，发现如果长文本超出盒子大小不会自动换行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
使用flex布局后文字设置文字不自动换行
qq_43689592的博客
10-18 2568
不需要换行的元素设置：flex-shrink: 0;
使用flex布局，文字不换行问题。
qq_45503103的博客
06-15 1万+
使用了flex布局文字内容不换行问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
flex布局父元素不换行子元素设置宽高不生效问题
团酱
03-29 1123
flex布局，flex-shrink属性
vue flex 布局实现div均分自动换行
热门推荐
诗雨远方的博客
01-08 3万+
                                   vue flex 布局实现div均分自动换行     许久没有更新了，今天才意外发现以前还是没有看懂盒模型，今天才算看懂了，首先我们今天来看一下想要实现的效果是什么?当然适配是必须的，1920 或者 1376都测试过。效果如图所选中区域所示：  一、关于flex布局我建议去看一下http://www.ruanyifeng...
flex布局文字换行
10-20
在flex布局中，由于子元素会自动适应宽度，因此当子元素中的文字超出边界时，文字默认不会自动换行。但可以通过以下方法进行文字换行： 1. 使用word-wrap或者overflow-wrap属性来控制文字的自动换行。 2. 在需要换行...
vue flex布局 文字自动换行
09-02
在 Vue 中使用 flex 布局，可以通过设置 `flex` 属性和 `flex-wrap` 属性来实现文字的自动换行。 首先，在你的 Vue 组件中，使用以下样式来定义一个 flex 容器： ```html <div class="flex-container"> <!-- 内容...
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
G佳伟
12-03 1536
flex布局中英文字符超出宽度不会自动折行的问题，但是设置了word-break: break-all；前面设置的flex: 1；就不生效了。
diaplay:flex布局下，css 文本超出强制换行未生效
任磊
09-08 2279
在弹性布局下， 如果父元素是display:flex，那么子元素文本超出后，无法做到自动换行。 .content { display: flex; padding: 10px; width: 350px; } 这是因为父元素的样式，影响了子元素。 解决方式是在父元素上加上 white-space:normal; .content{ display: flex; padding: 10px; width: 350px; white-space:..
flex布局，文字隐藏不换行失效问题
最新发布
h18794665197的博客
01-13 252
然而，当你运行这段代码时，你会发现文字会完全显示出来，而没有被隐藏并显示省略号。这是因为flex布局下，属性，且子元素的宽度设置为0，flex为1。这样，子元素不会超过父元素的宽度，文字就不会溢出了。父元素的宽度没有设置，那么子元素可能会溢出父元素。现在你再运行代码，你会发现文字成功被隐藏，并显示了省略号。当使用flex布局时，如果父元素设置了。，文字内容为"这是一段很长的文字"。解决这个问题的方法是给父元素添加。举一个例子，假设有一个父元素。来实现文字隐藏的效果失效。
CSS：flex布局 超出不换行不显示省略号 或父元素被撑开
a2117971372的博客
05-13 2813
对要求超出隐藏的那行字附加 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 其结果 图片是固定长宽，因为子元素被要求不换行，导致整个容器被撑出屏幕外，而且可以看出子元素的text-overflow和overflow并没有生效 解决方案：查看父元素或爷元素是否有min-width属性将其值设置0 display: flex; flex-direction: column; justify-conten.
flex布局的flex-wrap属性：设置子元素是否换行
听海边涛声
12-26 802
flex布局的flex-wrap属性：设置子元素是否换行
子div超出父div部分横向滚动，不换行
weixin_51747462的博客
10-19 3952
子div超出父div部分横向滚动，不换行；overflow：auto失效；flex布局无法出现滚轮效果；
使用flex 布局时，英文不自动换行
beijixing333y的博客
02-04 1460
问题场景： 在使用 flex 布局时，当内容超出宽度时的换行问题 问题描述： flex 布局时，内容超过盒子宽度时，当内容为中文时会自动换行显示，而内容是一串英文字符或者数字时，就不会自动换行显示，如下图： <div class="grid"> <div class="grid-cell"> <span>Flex 是 Flexible Box 的缩写，意为"弹性布局"。Flex 是 Flexible Box 的缩写，意为"弹性布局"。&l
flex布局文字可以换行数字不换行可以设置这个属性
weixin_61977295的博客
03-25 1072
display: flex; white-space: normal; word-break: break-all;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值