css 文字隐藏,鼠标移动显示
.d-line{ width: 100px; height: auto; } .p-inline { height: 28px; line-height: 28px; margin: 0px 10px 10px 0px; padding: 0px 5px; box-sizing: border-box; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #f2f2f2; color: #01aaed; cursor: pointer; } .p-inline:hover { overflow: visible; white-space: normal; word-break: break-all; height: auto; } <div class="d-line"> <p class="p-inline">css文字超出部分自动隐藏,鼠标移入时,显示全部。</p> </div>
默认显示:
鼠标移入时: