时间戳

首页 > 解决方案 > 为 div 内的文本添加右填充

html - 为 div 内的文本添加右填充

问题描述

我有一个固定大小的 div。div 内的文本可以溢出它并且它不会换行。

<div style="background-color: #7B92D3;" class="div-2">
    <p id="text">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

.div-2 {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 10%;
    padding-left: 10px;
}

问题是我想要左右填充，但只有左填充适用。如何在右侧添加空间？

在此处输入图像描述

标签： htmlcss

解决方案

设置时overflow:hidden,，文本将溢出到填充中。您可以创建透明边框来解决此问题。

.div-2 {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
}
<div style="background-color: #7B92D3;" class="div-2">
    <p id="text">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

推荐阅读