<script setup>
const gap = 5;
const blockSize = {
  width: 180,
  height: 30,
};
const unitHeight = 20 + 35;

const ltrText = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const rtlText = "شلؤيثبلاهتنمةىخحضقسفعررصءغئا";

const showReverseEllipsis = window.JsvCoreApi?.Platform == "android";
</script>

<template>
  <div id="layout-root">
    <div
      :style="{
        top: unitHeight * 0,
      }"
    >
      <div class="explain">ltr文字省略尾部</div>
      <div
        class="content-font base"
        :style="{
          direction: 'ltr',
        }"
      >
        {{ ltrText }}
      </div>
    </div>

    <div
      :style="{
        top: unitHeight * 1,
      }"
    >
      <div class="explain">ltr文字省略头部</div>
      <div
        v-if="showReverseEllipsis"
        class="content-font base"
        :style="{
          direction: 'rtl',
        }"
      >
        {{ ltrText }}
      </div>
      <div v-else class="explain" :style="{top: 25}">此平台不测试</div>
    </div>

    <div
      :style="{
        top: unitHeight * 2,
      }"
    >
      <div class="explain">rtl文字省略尾部</div>
      <div
        class="content-font base"
        :style="{
          direction: 'rtl',
        }"
      >
        {{ rtlText }}
      </div>
    </div>

    <div
      :style="{
        top: unitHeight * 3,
      }"
    >
      <div class="explain">rtl文字省略头部</div>
      <div
        v-if="showReverseEllipsis"
        class="content-font base"
        :style="{
          direction: 'ltr',
        }"
      >
        {{ rtlText }}
      </div>
      <div v-else class="explain" :style="{top: 25}">此平台不测试</div>
    </div>
  </div>
</template>

<style>
@import "../FontStyle.css";

.base {
  top: 25;
  width: 180;
  height: 30;
  line-height: 30;
  background-color: rgba(255, 255, 0, 0.5);
  color: #ff0000;
  font-size: 25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.explain {
  width: 180;
  height: 20;
  line-height: 20;
  font-size: 15;
  color: #000000;
}
</style>
