<template>
<view style="flex-grow: 1;">
<view style="height: 500px;padding: 0 30px; background-color: gray;justify-content: center;">
<view class="margin-bottom-10">
<text class="font-weight-bold">text-overflow:clip white-space:nowrap</text>
<text class="font-size-20" style="text-overflow: clip;white-space: nowrap;">{{multiLineText}}</text>
</view>
<view class="margin-bottom-10">
<text class="font-weight-bold">text-overflow:ellipsis white-space:nowrap</text>
<text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;">{{singleLineText}}</text>
<text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;">{{multiLineText}}</text>
</view>
<view class="margin-bottom-10">
<text class="font-weight-bold">white-space:normal</text>
<text class="font-size-20" style="white-space: normal;">{{multiLineText}}</text>
</view>
<view class="margin-bottom-10" style="overflow: visible;">
<text class="font-weight-bold">white-space: nowrap</text>
<text class="font-size-20" style="white-space: nowrap;align-self: flex-start;">{{multiLineText}}</text>
</view>
<view class="margin-bottom-10">
<text class="font-weight-bold">任意宽度截断(100px、200px、300px)</text>
<text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 100px;">{{multiLineText}}</text>
<text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 200px;">{{multiLineText}}</text>
<text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;width: 300px;">{{multiLineText}}</text>
</view>
<!-- #ifdef APP -->
<view class="margin-bottom-10">
<text class="font-weight-bold">lines:1 text-overflow:ellipsis</text>
<text class="font-size-20" style="text-overflow: ellipsis; lines: 1;">{{multiLineText}}</text>
</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
multiLineText: 'HBuilderX,轻巧、极速,极客编辑器;uni-app x,终极跨平台方案;uts,大一统语言',
singleLineText: 'uts,大一统语言(单行文本)'
}
}
}
</script>
<style>
.font-size-20 {
font-size: 20px;
}
.font-weight-bold {
font-weight: bold;
}
.margin-bottom-10 {
margin-bottom: 10px;
}
</style>