在写一个前端页面的时候,由于分辨率不同的两个屏幕展示,导致换行问题。以下为解决代码,将字显示在一行:
.text-size {
display: block; //内联元素加
width: 210px;
height: 12px;
font-size: 10px;
line-height: 12px;
word-break: keep-all; // 不换行
white-space: nowrap; // 不换行
overflow: hidden; // 内容超出宽度部分隐藏部分的内容
text-overflow: ellipsis; // 超出部分用点点显示
cursor: pointer; //鼠标移上去显示手
position: relative;
transition: opacity 1s ease-in-out;
// 鼠标移上去背景高亮
&:hover {
background-color: #ceeff5;
}