html - 如何在不破坏 CSS 对齐的情况下修复文本换行?
问题描述
我有下面的 html 和 css 来根据屏幕截图显示一些数据。如果我添加white-space: nowrap;
Then 文本移出框(第一个屏幕截图)。如果我不使用,那么它会包裹但会干扰框对齐(屏幕截图中的第二行)。
我可以设置什么属性来解决这个问题而不增加盒子宽度?我也尝试过显示属性,但到目前为止还没有运气。
<html>
<head>
<meta charset="UTF-8"/>
<style>
.sideBarList li {
width: 12%;
height: 50px;
text-align: center;
line-height: -10px;
border-radius: 10px;
background: skyblue;
margin: 0 10px;
white-space: nowrap;
display: inline-block;
color: black;
position: relative;
text-align: center;
font-family: Arial;
font-size: 11px;
}
.sideBarList li::before{
content: '';
position: absolute;
top: 25px;
left: -8em;
width: 8em;
height: .2em;
background: skyblue;
z-index: -1;
}
</style>
</head>
<body>
<ul class="sideBarList">
<li class="li">Hi There</li>
<li class="li">Hi There</li>
<li class="li"> ABC DEF GHI TYTYT YTYYT IIIOO</li>
</ul>
</body>
</html>
解决方案
display:inline-flex
也有效。请检查。
.sideBarList li {
width: 12%;
height: 50px;
text-align: center;
line-height: -10px;
border-radius: 10px;
background: skyblue;
margin: 0 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align:top;
color: black;
position: relative;
text-align: center;
font-family: Arial;
font-size: 11px;
}
.sideBarList li::before {
content: '';
position: absolute;
top: 25px;
left: -8em;
width: 8em;
height: .2em;
background: skyblue;
z-index: -1;
}
<ul class="sideBarList">
<li class="li">Hi There</li>
<li class="li">Hi There</li>
<li class="li"> ABC DEF GHI TYTYT YTYYT IIIOO</li>
</ul>
推荐阅读
- angular - 以角度显示组件中许多动态过滤器计数的最佳方法
- python - Stripe API PaymentIntent 和使用 Python 计费
- javascript - 使用 onclick 功能在 snap.svg 中加载 2 个 svg 文件
- php - 如何在输入字段的数组中给出动态名称?
- javascript - 如何使我的模态对话框响应?一旦我更改窗口的大小,我的模态框就会崩溃
- javascript - 确定输入焦点是由于自动对焦还是用户交互
- jquery - 更改文本项选择
- c# - 如何在 Visual Studio.Net 中找到 Dynamics 365 在线 svc 端点以使用连接服务?
- python-3.x - wxPython:如何显示状态/进度窗口并从另一个 python 代码更新进度?
- javascript - 如何使用 Vue.js Firebase UID 删除用户