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

忘是亡心i 2022-05-22 23:42 362阅读 0赞

70

当父元素设置display:flex后，子元素会自动布局并适应宽度，但里面的文本文字超出边界却无法自动换行

解决方法：

  1. .container2 .block .content1 p{
  2.     width:calc(100%);height:1.2rem;line-height:0.6rem;
  3.     overflow:hidden;overflow-wrap: break-word;
  5. }

只需要给子元素p加一个css属性: overflow-wrap:break-word；即可正常自动换行

70 1

补充：使用flex布局内部文本过多使父元素被撑开问题

预期效果：字数超出不换行，显示省略号

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70

父元素设为flex：1

  1. .pkitem .pkpart{
  2.   flex: 1;
  3. }

内部子元素：

  1. .pkitem .pkpart .t2 .p1{
  2.   width:90%;
  3.   text-overflow:ellipsis;
  4.   white-space: nowrap;overflow:hidden;
  5. }

结果由于p1的字数太多，使父元素被撑开为：

20190221105817870.png

解决办法：

1.给父元素加width：0

  1. .pkitem .pkpart{
  2.   flex: 1;width:0;
  3. }

2.给父元素加overflow:hidden

  1. .pkitem .pkpart{
  2.   flex: 1;overflow:hidden;
  3. }

发表评论

表情：
评论列表 （有 0 条评论，362人围观）

还没有评论，来说两句吧...

相关阅读