css - 垂直对齐顶部不适用于 dt 和 dd 元素
问题描述
我试图vertical-align:top
在这个例子中制作作品:
.container {
width: 200px;
white-space: nowrap;
background-color: #E6E9F0;
border: solid 1px black;
vertical-align: top;
}
dt,dd {
display: inline-block;
}
dd {
white-space: break-spaces;
margin: 0;
}
dt {
margin-right: 6px;
}
<dl>
<div class="container">
<dt>Text</dt>
<dd>Very very veeeeeeeeeeeeeery veeeeeery very very very long text</dd>
</div>
</dl>
如您所见,它不起作用,另一个问题是内容超出了容器。
我该如何解决这个问题?
解决方案
dd {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
}
尝试使用 css 省略号并添加垂直对齐 - 顶部到 dt
dt {
vertical-align: top;
margin-right: 6px;
}
推荐阅读
- azure - 如何解决 APIM 到 APIM 通信期间的 403/500 错误(托管在单独的虚拟网络中)
- git - 用于拒绝推送 Github 分支名称和提交消息的自定义 WebHook
- c - 如何在 VS Code 中设置日语?
- angular - 使用 rexponseType Blob 时,实际错误不是来自支持的,Angular 11 中只显示 OK
- javascript - 如何通过 ms-office 桌面应用程序将 okta 身份验证令牌传递到我的 webdav 服务器?
- python - 如何解决 zmq.error.ZMQError:Python 3 中使用的地址
- arrays - 逐个删除最小节点后求总成本
- javascript - 如果语句没有在 setter 中运行
- python - 当我们使用 corr.() 时,我们应该关心 DataFrame 中的 NA 数据吗?
- html - 减小窗口大小时如何使两列保持相同的高度?