blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Style): add multi-line ellipsis classes (#4690)

Browse Source
This commit is contained in:
neverland 2019-10-11 14:48:02 +08:00 committed by GitHub
parent a47122ce19
commit 79322ea892
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/card/index.less
View File

@ -1,5 +1,4 @@
@import '../style/var';
@import '../style/mixins/ellipsis';
.van-card {
position: relative;
@ -47,8 +46,6 @@
max-height: 32px;
font-weight: @font-weight-bold;
line-height: @card-title-line-height;
.multi-ellipsis(2);
}
&__desc {

2
src/card/index.tsx
View File

@ -100,7 +100,7 @@ function Card(
}
if (props.title) {
return <div class={bem('title')}>{props.title}</div>;
return <div class={[bem('title'), 'van-multi-ellipsis--l2']}>{props.title}</div>;
}
}

6
src/card/test/__snapshots__/demo.spec.js.snap
View File

@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
</div>
</a>
<div class="van-card__content">
<div class="van-card__title">商品名称</div>
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
<div class="van-card__bottom">
<div class="van-card__price">¥ 2.00</div>
@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-card__tag"><span class="van-tag van-tag--mark van-tag--danger">标签</span></div>
</a>
<div class="van-card__content">
<div class="van-card__title">商品名称</div>
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
<div class="van-card__bottom">
<div class="van-card__price">¥ 2.00</div>
@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
</div>
</a>
<div class="van-card__content">
<div class="van-card__title">商品名称</div>
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
<div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
标签

10
src/style/README.md
View File

@ -10,7 +10,15 @@ When the text content length exceeds the maximum container width, the excess tex
```html
<div class="van-ellipsis">
This is a paragraph of 250px width limit, the back will be omitted.
This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.
</div>
<div class="van-multi-ellipsis--l2">
This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.
</div>
<div class="van-multi-ellipsis--l3">
This is a paragraph that displays up to three lines of text, and the rest of the text will be omitted.
</div>
```

9
src/style/README.zh-CN.md
View File

@ -9,7 +9,14 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
当文本内容长度超过容器最大宽度时，自动省略多余的文本。
```html
<div class="van-ellipsis">这是一段宽度限制 250px 的文字，后面的内容会省略</div>
<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
<!-- 最多显示两行 -->
<div class="van-multi-ellipsis--l2">这是一段最多显示两行的文字，多余的内容会被省略</div>
<!-- 最多显示三行 -->
<div class="van-multi-ellipsis--l3">这是一段最多显示三行的文字，多余的内容会被省略</div>
```
### 1px 边框

21
src/style/demo/index.vue
View File

@ -1,7 +1,8 @@
<template>
<demo-section>
<demo-block :title="$t('ellipsis')">
<div class="van-ellipsis">{{ $t('text') }}</div>
<div class="van-ellipsis">{{ $t('text1') }}</div>
<div class="van-multi-ellipsis--l2">{{ $t('text2') }}</div>
</demo-block>
<demo-block :title="$t('hairline')">
@ -53,14 +54,16 @@ export default {
ellipsis: '文字省略',
animation: '动画',
toggle: '切换动画',
text: '这是一段宽度限制 250px 的文字，后面的内容会省略'
text1: '这是一段最多显示一行的文字，后面的内容会省略',
text2: '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略'
},
'en-US': {
hairline: 'Hairline',
ellipsis: 'Text Ellipsis',
animation: 'Animation',
toggle: 'Switch animation',
text: 'This is a paragraph of 250px width limit, the back will be omitted.'
text1: 'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
text2: 'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.'
}
},
@ -88,10 +91,16 @@ export default {
@import '../../style/var';
.demo-style {
.van-ellipsis {
max-width: 250px;
.van-ellipsis,
.van-multi-ellipsis--l2 {
max-width: 300px;
margin-left: @padding-md;
font-size: 13px;
font-size: 14px;
line-height: 18px;
}
.van-ellipsis {
margin-bottom: @padding-md;
}
.van-hairline--top {

8
src/style/ellipsis.less
View File

@ -3,3 +3,11 @@
.van-ellipsis {
.ellipsis();
}
.van-multi-ellipsis--l2 {
.multi-ellipsis(2);
}
.van-multi-ellipsis--l3 {
.multi-ellipsis(3);
}