Angular实现下拉框内容过长，过长部分省略号显示，并实现鼠标悬浮显示内容效果(完整代码)---ngbTooltip

    本文章将介绍如何在angular中，用bootstrap实现内容过长，以省略号的形式显示过长内容，并实现鼠标悬浮显示内容的效果。

     首先，创建一个包括下拉框的HTML模板：

<select class="custom-select">
  <option value="1">这是一个非常长的选项1</option>
  <option value="2">这是一个非常长的选项2</option>
  <option value="3">这是一个非常长的选项3</option>
  <!-- 添加更多选项 -->
</select>

    使用CSS样式来限制下拉框的宽度，并添加省略号：

.custom-select {
  width: 200px; / 设置下拉框的宽度 /
  overflow: hidden; / 隐藏溢出的内容 /
  white-space: nowrap; / 防止文本换行 /
  text-overflow: ellipsis; / 使用省略号来表示溢出的文本 /
}

实现效果：

   如果想鼠标悬浮显示内容：

ngbTooltip ：存放鼠标悬浮显示的内容。

placement：表示悬浮框的位置。bottom置于底部，top置于顶部

container="body" ：表示至于所有标签的顶层，并不受组件宽度的约束，可以显示所有内容。

 <select class="custom-select" ngbTooltip="这是一个非常长的选项" placement="bottom" container="body">
    <option value="1">这是一个非常长的选项1</option>
    <option value="2">这是一个非常长的选项2</option>
    <option value="3">这是一个非常长的选项3</option>
    <!-- 添加更多选项 -->
 </select>