<template>
  <view class="label-text-wrap">
    <view class="label-item">
      {{ label }}：
    </view>
    <view class="text-item" :style="{'-webkit-line-clamp': line}">
      {{ text }}
    </view>
  </view>
</template>

<script>
export default {
  name: "label-text",
  options: {styleIsolation: 'shared'},
  props: {
    label: {
      type: String,
      default: ""
    },
    text: {
      type: String,
      default: "--"
    },
    line: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {}
  },

  methods: {}
};
</script>

<style lang="scss">
.label-text-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 24rpx;

  .label-item {
    color: #000000;
    font-weight: bold;
  }

  .text-item {
    flex: 1;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    color: $uni-text-color;
  }
}

</style>
