1.实现布局的两端对齐
...
<style>
.label-container {
width: 80px;
background-color: darkorange;
text-align: justify;
text-align-last: justify;
}
</style>
...
<body>
<div class="label-container">四个字的</div>
<div class="label-container">三个字</div>
<div class="label-container">两字</div>
</body>
实现效果:
2.实现文本换行
...
<style>
.label-container {
width: 100px;
background-color: darkorange;
word-break: break-all;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
...
<body>
<div class="label-container">这是一段中英文文本,我需要换行abcdefghigklmn12345678910</div>
</body>
实现效果:
3.实现单行超出省略
...
<style>
.label-container {
width: 100px;
background-color: darkorange;
}
.label-text {
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
</style>
...
<body>
<div class="label-container">
<span class="label-text">这是一段中英文文本,我需要省略abcdefghigklmn12345678910</span>
</div>
</body>
实现效果:
4.实现多行超出省略
...
<style>
.label-container {
width: 100px;
background-color: darkorange;
}
.label-text {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
...
<body>
<div class="label-container">
<span class="label-text">这是一段中英文文本,我需要省略abcdefghigklmn12345678910</span>
</div>
</body>
实现效果:
