当前位置： 首页 > article >正文

省略内容在句子中间

article 2024/12/24 8:32:32

一、使用二分查找法

每次查找时，将查找范围分成两半，并判断目标值位于哪一半，从而逐步缩小查找范围。

循环查找

  1. 计算中间位置 mid = Math.floor((low + high) / 2)。
  2. 比较目标值 target 和中间位置的元素 arr[mid]：
    1. 如果 target == arr[mid]，则找到目标值，返回 mid。
    2. 如果 target < arr[mid]，则目标值在左半部分，更新 high = mid - 1。
    3. 如果 target > arr[mid]，则目标值在右半部分，更新 low = mid + 1。

终止条件：

  1. 当 low > high 时，表示查找范围为空，目标值不存在于数组中，返回 -1 或其他表示未找到的标志。
function binarySearch(arr, target) {
  let low = 0;
  let high = arr.length - 1;

  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    if (arr[mid] === target) {
      return mid; // 找到目标值，返回索引
    } else if (arr[mid] < target) {
      low = mid + 1; // 目标值在右半部分
    } else {
      high = mid - 1; // 目标值在左半部分
    }
  }

  return -1; // 未找到目标值
}

// 示例使用
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const target = 7;
console.log(binarySearch(arr, target)); // 输出: 6

<template>
  <div class="ellipsis-container" ref="ellipsisContainer">
    {{ startText }}...{{ endText }}
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, watch } from 'vue';

export default defineComponent({
  props: {
    endLen: {
      type: Number,
      default: 10,
    },
    text: {
      type: String,
      default: '外层套一个块级(block)元素，内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性ne元素。给外层元素设置溢出隐藏的样式外层套一个块级(block)元素，内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性ne元素。给外层元素设置溢出隐藏的样式外层套一个块级(block)元素，内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性ne元素。给外层元素设置溢出隐藏的样式外层套一个块级(block)元素，内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性ne元素。给外层元素设置溢出隐藏的样式',
    },
    startLen: {
      type: Number,
      default: null,
    },
  },
  setup (props) {
    const ellipsisContainer = ref(null);
    const str = ref(props.text);
    const startText = ref('');
    const endText = ref('');

    const updateText = () => {
      if (!ellipsisContainer.value) return;
      let containerWidth = ellipsisContainer.value.clientWidth;
      let fullText = str.value;
      let startTextLength = 0;
      let endTextLength = 0;

      // 使用二分查找法找到合适的截断位置
      let low = 0;
      let high = fullText.length;

      while (low <= high) {
        let mid = Math.floor((low + high) / 2);
        let tempStartText = fullText.substring(0, mid);
        let tempEndText = fullText.substring(fullText.length - mid);
        let combinedText = `${tempStartText}...${tempEndText}`;

        ellipsisContainer.value.textContent = combinedText;

        if (ellipsisContainer.value.scrollWidth <= containerWidth) {
          startTextLength = mid;
          endTextLength = mid;
          low = mid + 1;
        } else {
          high = mid - 1;
        }
      }

      startText.value = fullText.substring(0, startTextLength);
      endText.value = fullText.substring(fullText.length - endTextLength);
      console.log('startText:', startText.value);
      console.log('endText:', endText.value);
    };

    onMounted(() => {
      console.log('Component mounted');
      updateText();
    });

    return {
      ellipsisContainer,
      startText,
      endText,
    };
  },
});
</script>

<style scoped>
.ellipsis-container {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-emphasis: none;
  position: relative;
  width: 500px;
  max-width: 600px;
}
</style>

二、字符串处理

就是将需字符串截取对应的字符拼接到省略号尾部。

用于提取字符串中介于两个指定下标之间的部分：str.substring(start [, end])

  1. start：必需，提取的起始下标（从0开始）。如果为负数，则会将该值视为0。
  2. end：可选，提取的结束下标（不包括此位置的字符）。如果省略，则提取到字符串结尾；如果此参数小于 start 参数，则两者会被交换；如果为负数，则会将该值视为0。 
    let str = { value: 'hello world' };
console.log(str.value.substring(0, 5)); // 输出: hello
console.log(str.value.substring(6));   // 输出: world

<template>
  <div>
    <Ellipsis endLen="8" />
    <Ellipsis endLen="5" />
    <Ellipsis endLen="5" text="外层套一个块级(block)元素" />
    <Ellipsis endLen="10" text="外层套一个" />
  </div>
</template>

<script setup>
import Ellipsis from './Ellipsis.vue';
</script>
<template>
  <div class="flex">
    <!-- 显示截断后的文本和省略部分 -->
    <div class="truncate">{{ truncatedText }}</div>
    <div class="shrink-0">{{ endText }}</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 定义组件的属性，包括endLen和text
const props = defineProps({
  endLen: {
    type: Number,
    default: 10,
  },
  text: {
    type: String,
    default: '外层套一个块级(block)元素外层套一个块级(block)元素外层套一个块级(block)元素外层套一个块级(block)元素',
  },
});

// 设置默认文本内容
const defaultText = '外层套一个块级(block)元素、内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性ne）元素。给外层元素设置溢出隐藏的样式';
// 使用ref创建响应式变量str，用于存储文本内容
const str = ref(props.text || defaultText);

// 计算截断后的文本
const truncatedText = computed(() => str.value.substring(0, str.value.length - props.endLen));
// 计算末尾的文本
const endText = computed(() => str.value.substring(str.value.length - props.endLen, str.value.length));
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}

.truncate {
  overflow: hidden; // 隐藏超出容器的内容
  white-space: nowrap; // 不换行显示文本
  text-overflow: ellipsis; // 当内容超出容器时，显示省略号
}

.shrink-0 {
  flex-shrink: 0; // 确保该元素不会缩小
}
</style>

三、Css伪类

<template>
  <ul class="con">
    <li class="wrap">
      <span class="txt"> CSS 实现中间内容省略的技巧 - 2024-12-19</span>
      <span class="title" title="CSS 实现中间内容省略的技巧 - 2024-12-19">CSS 实现中间内容省略的技巧 - 2024-12-19</span>
    </li>
    <!-- 其他列表项 -->
  </ul>
</template>

<script setup>
</script>

<style scoped>
/* 容器样式 */
.con {
  font-size: 14px;
  /* 设置字体大小 */
  color: #666;
  /* 设置文字颜色 */
  width: 600px;
  /* 设置容器宽度 */
  margin: 50px auto;
  /* 设置上下外边距为50px，左右居中 */
  border-radius: 8px;
  /* 设置圆角 */
  padding: 15px;
  /* 设置内边距 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  resize: horizontal;
  /* 允许水平调整大小 */
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
  /* 添加阴影效果 */
}

/* 列表项样式 */
.wrap {
  position: relative;
  /* 相对定位 */
  line-height: 2;
  /* 设置行高 */
  height: 2em;
  /* 设置高度 */
  padding: 0 10px;
  /* 设置左右内边距 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  background: #fff;
  /* 设置背景色 */
  margin: 5px 0;
  /* 设置上下外边距 */
}

/* 奇数行列表项样式 */
.wrap:nth-child(odd) {
  background: #f5f5f5;
  /* 设置背景色 */
}

/* 标题样式 */
.title {
  display: block;
  /* 块级元素 */
  position: relative;
  /* 相对定位 */
  background: inherit;
  /* 继承背景色 */
  text-align: justify;
  /* 文字两端对齐 */
  height: 2em;
  /* 设置高度 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  top: -4em;
  /* 向上偏移4em，可能需要根据实际情况调整 */
}

/* 文本样式 */
.txt {
  display: block;
  /* 块级元素 */
  max-height: 4em;
  /* 设置最大高度 */
}

/* 伪元素样式 */
.title::before {
  content: attr(title);
  /* 使用title属性的值 */
  width: 50%;
  /* 设置宽度 */
  float: right;
  /* 右浮动 */
  white-space: nowrap;
  /* 防止换行 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  direction: rtl;
  /* 从右到左的方向 */
}
</style>


http://www.kler.cn/a/443979.html

相关文章：

  • LeetCode429周赛T4
  • 【工作流】工作顺序
  • 腾讯云智能结构化OCR：以多模态大模型技术为核心，推动跨行业高效精准的文档处理与数据提取新时代
  • 2024年图像处理、多媒体技术与机器学习
  • 探索 Seaborn Palette 的奥秘：为数据可视化增色添彩
  • vue2 - Day03 - （生命周期、组件、组件通信）
  • 安装配置Ubuntu 22.04
  • Binder 大小
  • 线性规划中的几种逻辑表达式
  • C#核心（18）面向对象多态vob
  • LabVIEW中的“Synchronize with Other Application Instances“
  • uniapp blob格式转换为video .mp4文件使用ffmpeg工具
  • DePIN潜力项目Spheron解读：激活闲置硬件，赋能Web3与AI
  • rust使用log与env_logger两个crate实现同时向控制台和文件输出日志。并在隔日自动创建新日志文件。
  • IEC 101/104 中为什么我们需要单点和双点信号
  • 01、NodeJS学习笔记，第一节：Node.js初识与内置模块
  • 如果 MySQL 的自增 ID 用完了，怎么解决？
  • C语言学习day24：DLL函数导出详情
  • leetcode 881.救生艇
  • R语言的字符串操作
  • APO v1.1.0 更新：大模型根因分析支持深入分析；优化数据筛选功能；内置 NGINX 日志分析看板
  • 小米自研系统Vela全面开源：开启物联网新时代的技术革新之旅
  • 【Yonghong 企业日常问题04】永洪BI可视化工具Linux部署全攻略(部署详解版)
  • 探索 Seaborn Palette 的奥秘：为数据可视化增色添彩
  • sqlserver新建用户并分配对视图的只读权限
  • 面试小札：Java后端闪电五连鞭_8