luyisac
luyisac
  • 发布:2023-03-19 20:09
  • 更新:2023-03-20 10:30
  • 阅读:432

nvue中text怎么撑开父元素啊(换行),

分类:nvue

nvue text元素要嘛无法撑开父级元素,要嘛无法换行,有大佬帮忙看看吗。代码如下(无法换行)

复制代码<template>  
    <view class="flex-1 bg-dark" @click="inputClosed">  
        <list class="flex flex-column flex-1 bg-danger">  
            <cell class="bg-dark  flex">  
                <view class="flex flex-column flex-1 bg-grey">  
                    <view class="flex-row margin-center">  
                        <text class="font-weight-bold">全部评论·</text>  
                        <text class="font-weight-bold">8</text>  
                    </view>  
                    <view class="flex flex-row m-2 bg-danger flex-1">  
                        <view>  
                            <image src="../../static/logo.png" mode="" style="width: 80rpx;height: 80rpx;"  
                                class="rounded-circle"></image>  
                        </view>  
                        <view class="flex flex-1 flex-column margin-center border-bottom align-start bg-dark">  
                            <text class="text-muted font margin-center-TB-10">名字</text>  
                            <text class="flex-1 font margin-center-TB-10" style="word-wrap: normal;">大大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊da的点点滴滴多多多多多多多多多多大大大多</text>  
                            <text class="text-muted font-sm margin-center-TB-10">2014-11-12</text>  
                        </view>  
                    </view>  
                </view>  
            </cell>  
        </list>  
    </view>  
</template>
2023-03-19 20:09 负责人:无 分享
已邀请:
小黑子爱rap

小黑子爱rap - jack

设置一个固定的width试一下,不要设置height
你这里的flex:1;
如果父元素没有设置width,flex:1;由内容撑开,甚至超出父元素的宽度,且不会换行

  • luyisac (作者)

    你好,这是整个页面的vue。我只设置了flex-1,并没有设置width,因为手设置width要吗固定,要吗计算比较麻烦。

    2023-03-20 10:52

  • 小黑子爱rap

    回复 luyisac你可以最外层的view设置一个width:750rpx;

    2023-03-20 11:41

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容