el-input的placeholder超出el-input的宽隐藏了?如何处理不隐藏
时间: 2023-08-18 08:39:31 浏览: 50
可以使用CSS的white-space属性来解决这个问题。将el-input的文本内容设置为不换行,并且超出部分不隐藏,可以在样式表中添加如下代码:
```
.el-input {
white-space: nowrap;
overflow: visible;
}
```
这将使el-input的文本内容不自动换行,并且超出部分不会被隐藏,而是会显示出来。这样就可以解决placeholder超出el-input的宽度而被隐藏的问题了。
相关问题
el-input placeholder
对于el-input组件的placeholder样式设置,可以使用伪类 ::placeholder。可以在.el-input__inner类中使用 ::placeholder来设置placeholder的样式。例如,在CSS中可以这样写:
.el-input__inner::placeholder{
color: red;
}
如果需要使用深度选择器来设置样式,可以使用 :deep(.el-input__inner)。例如:
:deep(.el-input__inner)::placeholder{
color: red;
}
在代码示例中,可以通过在el-input组件中添加placeholder属性来设置占位符文本。例如:
<el-form-item>
<el-input v-model="form.username" placeholder="请输入账号" prefix-icon="el-icon-user-solid"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
</el-form-item>
请注意,对于text-area组件,可以在.el-textarea__inner类上使用伪类 ::placeholder来设置placeholder样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [el-input/el-select placeholder样式修改](https://blog.csdn.net/qq_45327886/article/details/126673296)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [el-input placeholder添加icon图标](https://blog.csdn.net/Day71/article/details/115552183)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
el-input placeholder css字体加粗
根据提供的引用内容,可以使用以下CSS样式来将el-input的placeholder字体加粗:
```css
.textarea-nput-box .el-input__inner::placeholder {
font-weight: bold;
}
```
这样就可以将el-input的placeholder字体加粗了。\[1\]
#### 引用[.reference_title]
- *1* *2* [vue修改子组件中的el-input的placeholder字体颜色](https://blog.csdn.net/weixin_49668076/article/details/126509643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue 设置 el-input 的 placeholder 的文本颜色以及样式](https://blog.csdn.net/HH18700418030/article/details/125429906)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐













