记录一下,uni-app关于国际化时,英文字符串多行文本溢出问题样式

本文档展示了在Vue中如何处理英文字符串多行文本溢出问题,利用`-webkit-line-clamp`属性限制显示的行数,并通过点击事件动态控制文本的显示与隐藏。同时,还提及了uni-app组件库的使用方法和文档查看方式。
摘要由CSDN通过智能技术生成
<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>

记录一下,关于国际化时,英文字符串多行文本溢出问题样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

EndlessPhilosophy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值