Question

这是一个例子

<style type = "text/css">
    .thequoteofpee {
        position: absolute;
        left: 464px;
        top: 362px;
        font-size: 20px;
        width: 420px;
        height: 40px;
        border-color: #00297A;
        border: 1px;
        border-style: solid;
        background-color: white;
        text-indent: 10px;
        }
</style>

<body>
<input name = "thequoteofpee" class = "thequoteofpee" type = "quote" placeholder = "Bio"/>
</body>

有没有人知道怎么做，所以这个人只能输入150个字符。你怎么做到这一点就像从右侧进来text-indent所以它看起来更好。感谢任何试图回答这个问题的人！

P.S。我没有什么可以说出这个名字，所以我把它命名为奇怪。

Answer 1

对字符限制使用maxlength，而不是text-indent，您可以使用填充，这会影响输入的所有边。

.thequoteofpee {
        font-size: 20px;
        width: 420px;
        height: 40px;
        border-color: #00297A;
        border: 1px;
        border-style: solid;
        background-color: white;
        padding: 10px;
        box-sizing: border-box;
        }

<body>
<input name = "thequoteofpee" class = "thequoteofpee" type = "quote" 
    placeholder = "Bio" maxlength="150"/>
</body>

由于默认情况下填充会添加到框的高度和宽度，因此您还应使用box-sizing：border-box来确保保留原始高度和宽度。如果你只想要左侧和右侧的填充，请使用padding-left：10px和padding-right：10px。

我冒昧地删除了这个演示的位置，左边和顶部属性，因为否则在片段中找到输入会相当烦人，但请相信我，它的效果一样好。： - ）

Answer 2

对于文本缩进，您可以使用填充，因此您可以控制顶部，右侧，底部和左侧的四个值，而不是一个值text-indent offer，如下所示：

    padding: 0 10px 0 10px;

限制字符使用的最大长度maxlength="20"，更新将其用作此类属性

<input name = "thequoteofpee" class = "thequoteofpee" type = "quote" placeholder = "Bio" maxlength="20"/>

如何在<input type =“number”/>上使用overflow-x：hidden

2 个答案: