css解决两侧添加ellipsis属性
1. 应用场景
在一个列表中，每行有名称和描述信息；然后提出如下要求：
- 要求名称字段最大宽度是60%；超过60%的宽度出现...
- 描述字段要求占用名称字段剩余空间，当描述字段和名称字段的宽度大于100%时；描述字段也要出现...
- 名称字段要靠左对齐，描述字段要靠右对齐
- 名称字段和描述字段中间间隔16px;
2. 具体实现
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 60px;
}
.list-row {
display: flex;
align-items: center;
width: 500px;
height: 30px;
background-color: cadetblue;
}
.name,.description{
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.name{
max-width: 60%;
}
.description{
}
</style>
</head>
<body>
<div class="list-row">
<div class="name">名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</div>
<div class="description">描述描述</div>
</div>
</body>
当名称的长度超过60%的时候可以看到出现了省略符号；
现在需要满足是名称字段和描述字段间隔时16px和名称字段要靠左对齐，描述字段要靠右对齐；修改如下:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 60px;
}
.list-row {
display: flex;
+ gap:16px;
+ justify-content: space-between;
align-items: center;
width: 500px;
height: 30px;
background-color: cadetblue;
}
.name,.description{
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.name{
max-width: 60%;
}
.description{
}
</style>
</head>
<body>
<div class="list-row">
<div class="name">名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</div>
<div class="description">描述描述</div>
</div>
</body>
现在需要满足描述字段要求占用名称字段剩余空间，当描述字段和名称字段的宽度大于100%时；描述字段也要出现...,修改如下:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
padding: 60px;
}
.list-row {
display: flex;
gap:16px;
align-items: center;
justify-content: space-between;
width: 500px;
height: 30px;
background-color: cadetblue;
}
.name,.description{
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.name{
max-width: 60%;
+ flex-shrink: 0; /* 右侧描述字段文字过多的时候，会导致左侧宽度收缩；这里规定名称字段不压缩 */
}
.description{
}
</style>
</head>
<body>
<div class="list-row">
<div class="name">名称名称名称名称名称名称名称名称名称名称名称名称名称名称名称</div>
<div class="description">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</div>
</div>
</body>
这样就满足了上面4个要求
