修改下面的代码,要求两个span标签的内容在一行显示,第二个span标签内容过长时用省略号表示,鼠标指在该标签时显示全部内容<div> <span>房屋地址:</span><span>高新区东荷路1366号玺园18、19号楼</span> </div>
时间: 2023-11-16 10:33:20 浏览: 103
标题过长,省略显示,鼠标移上去显示全部
4星 · 用户满意度95%
可以使用CSS中的flex和text-overflow属性来实现该效果。代码如下:
```html
<div style="display: flex;">
<span style="white-space: nowrap;">房屋地址:</span>
<span style="overflow: hidden; text-overflow: ellipsis;">高新区东荷路1366号玺园18、19号楼</span>
</div>
```
解释一下:
- 在`<div>`标签上设置`display: flex`,让两个`<span>`标签在一行内显示。
- 第一个`<span>`标签上设置`white-space: nowrap`,防止文本换行。
- 第二个`<span>`标签上设置`overflow: hidden`,让文本溢出部分隐藏,`text-overflow: ellipsis`表示用省略号表示隐藏部分。
阅读全文