vue文字过长显示省略号，悬停时显示全称

最新推荐文章于 2024-10-24 16:40:28 发布

原创最新推荐文章于 2024-10-24 16:40:28 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种用于地图应用中的弹窗样式设计及内容生成方法，详细展示了如何使用HTML与CSS实现自定义的弹窗布局，并通过JavaScript动态填充建筑名称、办公室数量等关键信息。

生成标签，控制文字超出样式：

let html = `
          <div class="index-pop">
              <img src="${mimg}" class="micon" />
              <p class="ovell">
                <span style="font-size:12px;font-weight:600;">${element.building_name}</span>
              </p>
              <p class="ovell">
                总办公室：${element._room_count}间
              </p>
              <p class="ovell">
                总入驻单位：${element._dept_count}个
              </p>
              <p class="ovell">
                总入驻人数：${element._person_count}人
              </p>
          </div>
        `

.mapboxgl-popup-content .index-pop {
  padding: 5px 10px 7px 38px;
	position: relative;
	.micon{
		position: absolute;
		top: 5px;
		left: 7px;
		.size(23px,23px)
	}
  p {
		margin-bottom: 5px;
		.fc(14px, #909399);
		&:last-child{
			margin-bottom: 0;
		}
  }
}
.mapboxgl-popup-content .index-pop:hover {
  width: 180px;
  padding: 5px 10px 7px 38px;
}
.ovell span{
  display: block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
}
.ovell span:hover{
  display: block;
  overflow: visible;
}