<template>
<view class="container">
<view> hello world</view>
<view v-bind:class="{ 'module line-clamp': isActives }">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view>
<span class="link" v-if="isActives" @click="shows()">查看更多</span>
<span class="link" v-if="!isActives" @click="hides()">收起</span>
<br>
<text class="intro">详见:</text>
<uni-link :href="href" :text="href"></uni-link>
<div v-bind:class="{ 'module line-clamp': isActive }">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<span class="link" v-if="isActive" @click="show()">查看更多</span>
<span class="link" v-if="!isActive" @click="hide()">收起</span>
</view>
</template>
<script>
export default {
data() {
return {
href: 'https://uniapp.dcloud.io/component/README?id=uniui',
isActive: true,
isActives: true
}
},
methods: {
show() {
this.isActive=false;
},
hide() {
this.isActive=true;
},
shows() {
this.isActives=false;
},
hides() {
this.isActives=true;
}
}
}
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
.module {
width: 250px;/*宽度可自定义*/
margin: 0 0 1em 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;/*可自定义显示行数*/
-webkit-box-orient: vertical;
}
.module p {
margin: 0;
}
</style>
记录一下,关于国际化时,英文字符串多行文本溢出问题样式