css flex布局关于文字换行遇到的坑

最新推荐文章于 2024-09-05 01:30:55 发布

爱敲代码的小趴菜

最新推荐文章于 2024-09-05 01:30:55 发布

阅读量1.7k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/SUperstarkd/article/details/121341713

版权

本文探讨了在Flex布局中，如何使用text-overflow、overflow和white-space属性来实现文字不换行并避免撑开父容器的效果。通过在父元素设置overflow:hidden，可以有效裁剪超出的内容，保持布局的稳定性。同时，我们分析了这些CSS属性在前端开发中的应用和注意事项。

摘要由CSDN通过智能技术生成

在flex布局中会有文字设置不换行后把容器撑开
如：

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

直接在文字中加入以上样式会把父容器撑开
需要在父容器中加入overflow: hidden;把超出盒子的内容裁剪

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱敲代码的小趴菜

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

实现内容自动撑开盒子

新阿巴阿巴

09-18

1362

原理行内元素、行内块元素，不可以指定宽度和高度，自身的宽度由内容的大小决定代码演示——导航栏的应用 html： <ul> <li>导航1</li> <li>导航2</li> <li>导航3</li> <li>导航4</li> <li>导航5</li> </ul> css： li { list-style: n

css弹性布局自动换行怎么实现,CSS Flex弹性布局，多个div自动换行，源码。

weixin_42437126的博客

08-04

3255

标签：之前被人问到如果有一个div里面有多个小的div 如何做到缩小页面的时候实现小div的换行，首先我想到的其实是bootstrap里的栅格化布局。后来才想到CSS3还有这么一个属性。现在跟大家分享一下。源码：Flex布局.con {/* 要创建一个 flex 容器，只需要将一个 display: flex 属性添加到一个元素上。默认情况下，所有的直接子元素都被认为是 flex 项，并从左到右依...

参与评论您还未登录，请先登录后发表或查看评论

flex布局--文字多了会挤压另一个div

qq_53046458的博客

06-07

517

在被挤压的盒子上加入：flex-shrink:0。

深入理解CSS中的空白符和换行

weixin_30521649的博客

03-30

162

前面的话　　CSS3新增了两个换行属性word-wrap和word-break。把空白符和换行放在一起说，是因为实际上空白符是包括换行的，且常用的文本不换行是使用的空白符的属性white-space: nowrap;到底它们还有些什么属性值，以及有什么对应的用法呢？本文就空白符和换行的内容做详细介绍和梳理空白符定义　　空白符是指空格、制表符和回车；HTML默认已经把所有空白符...

CSS中如何实现弹性盒子布局（Flexbox）的换行和排序功能

09-05

1487

在Flexbox中，换行和排序是非常实用的功能，可以用来控制容器内元素的排列方式。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过上述示例和技术要点，您应该能够熟练地使用Flexbox来实现各种复杂的布局，并在实际项目中灵活应用这些知识。Flexbox可以用来创建复杂的网格布局，其中包含多个行和列，以及不同大小的单元格。在实际项目中，可能会遇到更复杂的布局需求，例如嵌套的Flex容器、多列布局等。属性，可以控制Flex项目在容器中的排序顺序。

CSS - flex 弹性布局容器固定宽度，内容不固定时，文字换行问题

weixin_54259790的博客

07-15

2588

## 代码 <!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"> <title&

html flex布局换行,flex布局下换行兼容问题

weixin_39966020的博客

06-10

813

最近使用flex布局大体上都没问题，就是一些版本都存在一点兼容问题尤其是换行的时候，我们来看下面的Less 文件！各大浏览器兼容都写好了！但是还是存在换行问题，看列子.flex-block(){display:box;/*OLD-Android4.4-*/display:-webkit-box;/*OLD-iOS6-,Safar...

html flex自动换行,css flex布局超长自动换行的示例代码

06-05

以下是一个使用 HTML 和 CSS Flexbox 布局实现自动换行的示例代码： HTML 代码： ```html <div class="flex-container"> <div class="flex-item">Item 1 <div class="flex-item">Item 2 <div class="flex-item...

设置文字超出盒子部分换行

weixin_42261203的博客

08-21

2531

设置文字超出盒子部分换行 white-space:normal;//设置文字换行 word-wrap : break-word;//设置数字强制换行

CSS强制换行

weixin_34245082的博客

07-23

193

CSS强制换行自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行...

使用display:flex或者float后子元素文本无法自动换行或字数过多父元素被撑开

热门推荐

lianzhang861的博客

05-29

1万+

当父元素设置display:flex后，子元素会自动布局并适应宽度，但里面的文本文字超出边界却无法自动换行解决方法： .container2 .block .content1 p{ width:calc(100%);height:1.2rem;line-height:0.6rem; overflow:hidden;overflow-wrap: break-word; } ...

CSS 数字和字母将容器撑大问题解决

12-29

对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html <div id=wrap>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css #wrap{white-space:normal; width:200px; } 1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all; wi

每日小技巧：使用的flex布局时文字换行情况

Cy01234的博客

06-12

719

很多小伙伴在写代码时可能都会有这样的一个烦恼，在屏幕尺寸进行缩放时或者在不同的手机屏幕尺寸不同时，使用的flex布局时文字有可能会掉下来。这时就有了这样的一个方法，flex-shrink。

学习记录：flex:wrap换行之后中间有大空隙的解决方法

weixin_44845483的博客

07-26

5838

学习链接如果在内部项目太多，一行排列不下的情况下，我们就需要设置内部项目排列不下时选择换行。此属性就是：flex-wrap:wrap 但是换行之后项目会根据整体布局进行调整，导致两行之间的间隙很大，所以我们还需要设置一个属性为align-content:flex-start 该样式用于让div与交叉轴的起点对齐（即顶部对齐） ...

Css Flex弹性布局中的换行与溢出处理

qq_58626489的博客

02-04

2871

在Flex弹性布局中，元素的布局仅依赖于父容器的设置，而不再需要复杂的相对或绝对定位。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。

flex-grow flex-shrink 解决最后一行个数不足无法对齐

Admans的专栏

09-21

445

解决办法：在原来的列表内手动添加一空行，并定义一个不可见的样式即可，这行的最大个数要等于原来每行设定的个数，正常情况下，每页大小15个，设置每行3列，刚好5行。当外部容器宽度不足以放3列时，自动换行，

CSS3 盒子设置border和padding不撑开盒子

西柚2015地信小白GISer

05-05

6662

普通的盒子模型我们设置border会将盒子撑大 <!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-scal

CSS几种换行方式、文本超出隐藏及单词内的断行方式

weixin_44646763的博客

12-31

2136

CSS几种换行方式、文本超出隐藏及单词内的断行方式

flex-wrap: wrap 溢出换行但是父盒子没有被撑开的解决办法

前端一线搬运工的博客

04-29

4781

场景重现当使用flex布局垂直排列并且到达父盒子高度就换行的时候, 会产生溢出的情况解决办法 ul{ writing-mode:vertical-lr; li{ writing-mode:horizontal-tb; } } // 父盒子: writing-mode:vertical-lr; (垂直方向内内容从上到下，水平方向从左到右) // 子元素:writing-mode:horizontal-tb; (水平方向自上而下的书写方式。即 le...