CSS文字超出变省略号

Question

<!-- 主页 -->
<template>
    <view class="index">
        <musicead title="云音乐" :icon="false" :style="{color:'black'}"></musicead>
        <view class="container">
            <scroll-view scroll-y="true">
                <view class="index-search" @tap="handleToSearch">
                    <text class="iconfont icon-search"></text>
                    <input type="text" placeholder="搜索歌曲" />
                </view>
                <view class="index-list">
                    <view class="index-list-item" v-for="(item,index) in topList" :key="index"
                        @tap="handleToList(item.listId)">
                        <view class="index-list-img">
                            <image :src="item.coverImgUrl"></image>
                            <text>{{item.updateFrequency}}</text>
                        </view>
                        <view class="index-list-text">
                            <!-- 歌手，歌名 -->
                            <view v-for="(item,index) in item.tracks" :key="index">
                                {{index+1}}.{{item.first}}-{{item.second}}
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
 
<script>
    //引入
    import '@/common/iconfont.css';
    import musicead from '../../components/musicead/musicead.vue'
    import {
        topList
    } from '../../common/api.js'
    export default {
        data() {
            return {
                // 遍历数组
                topList: []
            }
        },
        components: {
            //注册组件
            musicead
        },
        // onLoad等整个页面加载完毕触发
        onLoad() {
            //调用接口
            topList().then((res) => {
                console.log(res)
                if (res.length) {
                    this.topList = res;
                }
            });
        },
        methods: {
            handleToList(listId) {
                uni.navigateTo({
                    url: '../list/list?listId=' + listId
                })
            },
            handleToSearch() {
                uni.navigateTo({
                    url: '/pages/search/search'
                });
            }
        }
    }
</script>q
 
<style scoped>
    /* .index {} */
 
    .index-search {
        display: flex;
        align-items: center;
        height: 70rpx;
        margin: 70rpx 30rpx 30rpx 30rpx;
        background: #f7f7f7;
        border-radius: 50rpx;
    }
 
    .index-search text {
        font-size: 26rpx;
        margin-right: 26rpx;
        margin-left: 28rpx;
    }
 
    .index-search input {
        font-size: 28rpx;
        flex: 1;
    }
 
    .index-list {
        margin: 0 30rpx;
    }
 
    .index-list-item {
        display: flex;    
        margin-bottom: 34rpx;
        
    }
 
    .index-list-img {
        width: 212rpx;
        height: 212rpx;
        position: relative;
        border-radius: 30rpx;
        overflow: hidden;
        margin-right: 22rpx;
    }
 
    .index-list-img image {
        width: 100%;
        height: 100%;
    }
 
    .index-list-img text {
        position: absolute;
        left: 12rpx;
        bottom: 16rpx;
        color: white;
        font-size: 20rpx;
    }
 
    .index-list-text {
        font-size: 24rpx;
        line-height: 66rpx;
        /* 文字超出显示为省略号*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
    }
</style>
 

Answer 1

应该是给index-list-text下面的view添加样式

 <view class="index-list-text">
                            <!-- 歌手，歌名 -->
                            <view class="index-list-son" v-for="(item,index) in item.tracks" :key="index">
                                {{index+1}}.{{item.first}}-{{item.second}}
                            </view>
                        </view>
.index-list-son {
        font-size: 24rpx;
        line-height: 66rpx;
        /* 文字超出显示为省略号*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
    }