断开文本的样式元素(空白:正常)



在我的站点中,我将表单组件限制为固定大小。同时,当文本很长时,我允许标签打断文本,我想知道是否有办法捕捉标签是否真的打断了文本(这样我就可以相应地调整固定高度(或

注意,标签本身来自服务器(作为一种资源(,并且网站以许多设备分辨率显示,所以我无法预测文本是否会破坏

我的代码如下:

HTML

<form>
<div class="long-label">
<label for="question1">What is your name?</label>
<input id="question1" name="question1" >
<span class="error" data-for="question1"></span>
</div>
<div class="long-label">
<label for="question2">What is your favourite colour?</label>
<input id="question2" name="question2" >
<span class="error" data-for="question2"></span>
</div>
</form>

CSS

.long-label {height:60px;}
.long-label label { white-space:normal;}

编辑:
我为我试图实现的目标做了一个代码笔示例https://codepen.io/smallscalearmageddon/pen/eYNQGJK

我将尝试更清楚地解释这种情况:
我的网站中有一个表单,上面有几个输入,上面有标签,下面有错误范围,如果输入值无效,就会注入这些范围。

当某个输入发生这种情况时,错误范围将其下方的输入向下推,图形人员说这很难看,输入之间的裕度应该固定。

所以我已经固定了高度({height:60px;}(。

不幸的是,在许多语言中,输入上面的标签都是作为资源来自服务器的,其中一些语言会使标签文本变得很长,直到它分成两行。

当这种情况发生时+显示一个验证错误-错误范围覆盖在它下面的输入标签上。

所以我想问的是:

有没有一种方法可以检测文本何时换行,这样我就可以相应地固定它的高度

我希望我现在清楚

.long-label {min-height:60px;}

编辑:

这支钢笔是以你的例子为基础的:https://codepen.io/ziad-darwich/pen/vYOQpyQ

相关内容

最新更新