<template>
    <div
        class="nus_textl"
        @click="_onClick($event)"
        @tap="_onTap($event)">
        <div
            class="nu_textline">
        </div>
        <div
            class="nu_textwrap">
            <span
                class="nu_textwrap-text">
                <slot>
                    {{nameText}}
                </slot>
            </span>
        </div>
        <div
            class="nu_textline">
        </div>
    </div>
</template>

<script>
import TextTmp from '../_comm/TextTmp';
export default {
    extends: TextTmp,
    name: 'NuTextl'
};
</script>

<style lang="scss">
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';

.nus_textl {
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-color: $nutextl-br-color;
    .nu_textline {
        flex: 1;
        height: 1px;
        position: relative;
        border-color: inherit;
        border-width:  1px;
        &::before {
            content: " ";
            position: absolute;
            top: 0;
            height: 0px;
            border-style: solid;
            border-width:  0;
            border-bottom-width: 1px;
            border-color: inherit;
            left: 0;
            right: $nutextl-line-padding;
            transform: scaleY(0.5);
        }
        &:last-child{
            &::before{
                left: $nutextl-line-padding;
                right: 0;
            }
        }
    }
    .nu_textwrap{
        max-width: 100%;
    }
    .nu_textwrap-text{
        white-space: nowrap;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
</style>

