next UI

# Ellipsis 文本自动省略号

# 概述

文本过长自动处理省略号，支持按照文本长度、最大行数、限制高度三种方式截取。

# 代码示例

按照字符数省略
设置属性 length 可以按照指定长度省略。
设置属性 tooltip 可以以 Tooltip 的形式显示完整的内容。
史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。

显示 Tooltip

史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。 
<template>
    <Ellipsis :text="text" :length="100" />

    <p class="ivu-m"><strong>显示 Tooltip</strong></p>

    <Ellipsis :text="text" :length="100" tooltip />
</template>
<script>
    export default {
        data () {
            return {
                text: '史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。'
            }
        }
    }
</script>
Expand Copy
按照高度省略
设置属性 height 可以按照指定高度省略。
史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。 
<template>
    <div style="width:400px;margin: 0 auto;">
        <Ellipsis :text="text" :height="100" tooltip />
    </div>
</template>
<script>
    export default {
        data () {
            return {
                text: '史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。'
            }
        }
    }
</script>
Expand Copy
按照行数省略
设置属性 lines 可以指定最大行数，超出这个行数的文本会自动截取。
另一种按照行数省略的方法是使用自定义指令 v-line-clamp，它是 CSS 级别的处理，具有更高的性能，但只适用于 Webkit 内核浏览器，详见指令一栏。
史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。 
<template>
    <div style="width:400px;margin: 0 auto;">
        <Ellipsis :text="text" :lines="3" tooltip />
    </div>
</template>
<script>
    export default {
        data () {
            return {
                text: '史蒂夫·乔布斯（英语：Steve Jobs），是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。'
            }
        }
    }
</script>
Expand Copy

# API

# Ellipsis Props

属性 说明 类型 默认值
text 文本 String -
height 限制的高度 Number -
lines 限制行数，将换算为 height。如果设置了 height，则直接使用 height 计算 Number -
length 按照指定长度截取 Number -
full-width-recognition 是否将全角字符的长度视为2来计算字符串长度，适用于 length Boolean false
disabled 是否禁用 Boolean false
tooltip 是否开启 tooltip Boolean false
transfer tooltip 的 transfer 属性 Boolean false
theme tooltip 的 theme 属性，可选值为 light 或 dark String dark
max-width tooltip 的 max-width 属性 String, Numbe 250
placement tooltip 的 placement 属性 String bottom

# Ellipsis Events

事件名 说明 返回值
on-show 文本全部展示的时候触发 -
on-hide 文本省略的时候触发 -

← 粘贴表格数据 →