Skip to content

H
hello uni-app x

Accustomed_ / hello uni-app x
与 Fork 源项目一致

Fork自 DCloud / hello uni-app x

通知 1
Star 0
Fork 0
H
hello uni-app x
提交 711ac6c4 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

feat(component): text \n

上级 58152aa3
隐藏空白更改
内联 并排
Showing with 120 addition and 98 deletion
pages/component/text/text-props.test.js 0 → 100644
浏览文件 @ 711ac6c4
const PAGE_PATH = '/pages/component/text/text-props'
describe('text-props', () => {
beforeAll(async () => {
const page = await program.navigateTo(PAGE_PATH)
await page.waitFor(1000)
})
it('screenshot', async () => {
const image = await program.screenshot({ fullPage: true })
expect(image).toMatchImageSnapshot()
})
})
pages/component/text/text-props.uvue
浏览文件 @ 711ac6c4
<template> <template>
<scroll-view> <scroll-view>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">text相关属性示例</text> <text class="uni-title-text">text相关属性示例</text>
</view> </view>
<view class="uni-title"> <view class="uni-title">
<text class="uni-subtitle-text">根据宽度自动折行</text> <text class="uni-subtitle-text">根据宽度自动折行</text>
</view> </view>
<view class="text-box"> <view class="text-box">
<text>{{multiLineText}}</text> <text>{{ multiLineText }}</text>
</view> </view>
<view class="uni-title">
<text class="uni-subtitle-text">\\n换行</text>
</view>
<view class="text-box">
<text>\n换\n行\n</text>
</view>
<view class="uni-title"> <view class="uni-title">
<text class="uni-subtitle-text">截断（clip）</text> <text class="uni-subtitle-text">\\n换行</text>
</view> </view>
<view class="text-box" style="height: 200rpx;"> <view class="text-box">
<text class="uni-flex-item" style="text-overflow: clip;">{{multiLineText}}</text> <text>\n 换行</text>
</view> <text>\\n 换行</text>
<text>\\\n 换行</text>
<view class="uni-title"> <text>\n 换行 \\n 换行 \\\n 换行 \\\\n 换行 \\\\\n 换行</text>
<text class="uni-subtitle-text">截断（ellipsis）</text> </view>
</view>
<view class="text-box" style="height: 200rpx;">
<text class="uni-flex-item" style="text-overflow: ellipsis;">{{multiLineText}}</text>
</view>
<view class="uni-title"> <view class="uni-title">
<text class="uni-subtitle-text">selectable</text> <text class="uni-subtitle-text">截断（clip）</text>
</view> </view>
<view class="text-box"> <view class="text-box" style="height: 200rpx">
<text :selectable="true">{{singleLineText}}</text> <text class="uni-flex-item" style="text-overflow: clip">{{
</view> multiLineText
}}</text>
</view>
<view class="uni-title"> <view class="uni-title">
<text class="uni-subtitle-text">space</text> <text class="uni-subtitle-text">截断（ellipsis）</text>
<text class="uni-subtitle-text">依次为nbsp ensp emsp效果</text> </view>
</view> <view class="text-box" style="height: 200rpx">
<view class="text-box"> <text class="uni-flex-item" style="text-overflow: ellipsis">{{
<text space="nbsp">{{singleLineText}}</text> multiLineText
<text space="ensp">{{singleLineText}}</text> }}</text>
<text space="emsp">{{singleLineText}}</text> </view>
</view>
<view class="uni-title"> <view class="uni-title">
<text class="uni-subtitle-text">decode</text> <text class="uni-subtitle-text">selectable</text>
<text class="uni-subtitle-text">依次为lt gt amp apos nbsp ensp emsp效果</text> </view>
</view> <view class="text-box">
<view class="text-box"> <text :selectable="true">{{ singleLineText }}</text>
<text :decode="true">&lt; &gt; &amp; &apos;</text> </view>
<text :decode="true">uni-app&nbsp;x，终极跨平台方案</text>
<text :decode="true">uni-app&ensp;x，终极跨平台方案</text> <view class="uni-title">
<text :decode="true">uni-app&emsp;x，终极跨平台方案</text> <text class="uni-subtitle-text">space</text>
</view> <text class="uni-subtitle-text">依次为nbsp ensp emsp效果</text>
</view>
<view class="uni-title"> <view class="text-box">
<text class="uni-subtitle-text">嵌套</text> <text space="nbsp">{{ singleLineText }}</text>
</view> <text space="ensp">{{ singleLineText }}</text>
<view class="text-box"> <text space="emsp">{{ singleLineText }}</text>
<text>一级节点黑色 </view>
<text style="color: red;">二级节点红色
<text>三级节点不继承二级的颜色</text> <view class="uni-title">
</text> <text class="uni-subtitle-text">decode</text>
<text style="font-size: 50px;">二级节点大字体</text> <text class="uni-subtitle-text"
</text> >依次为lt gt amp apos nbsp ensp emsp效果</text
</view> >
</view> </view>
</scroll-view> <view class="text-box">
<text :decode="true">&lt; &gt; &amp; &apos;</text>
<text :decode="true">uni-app&nbsp;x，终极跨平台方案</text>
<text :decode="true">uni-app&ensp;x，终极跨平台方案</text>
<text :decode="true">uni-app&emsp;x，终极跨平台方案</text>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">嵌套</text>
</view>
<view class="text-box">
<text
>一级节点黑色
<text style="color: red"
>二级节点红色
<text>三级节点不继承二级的颜色</text>
</text>
<text style="font-size: 50px">二级节点大字体</text>
</text>
</view>
</view>
</scroll-view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
title: 'text-props', title: 'text-props',
multiLineText: 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言；HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言', multiLineText:
singleLineText: 'uni-app x，终极跨平台方案' 'HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言；HBuilderX，轻巧、极速，极客编辑器；uni-app x，终极跨平台方案；uts，大一统语言',
} singleLineText: 'uni-app x，终极跨平台方案',
}, }
methods: { },
methods: {},
} }
}
</script> </script>
<style> <style>
.text-box { .text-box {
margin-bottom: 40rpx; margin-bottom: 40rpx;
padding: 40rpx 0; padding: 40rpx 0;
display: flex; display: flex;
background-color: #FFFFFF; background-color: #ffffff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.text { .text {
font-size: 30rpx; font-size: 30rpx;
color: #353535; color: #353535;
line-height: 54rpx; line-height: 54rpx;
text-align: center; text-align: center;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或