【问题标题】:JS get available space between text and element boundariesJS 获取文本和元素边界之间的可用空间
【发布时间】:2019-12-13 00:12:05
【问题描述】:

有没有办法在文本和元素边界之间获得可用空间?

问题是下一个。我需要在输入标签中显示错误消息(按设计)。如果没有足够的空间,我需要显示一个可以悬停的图标并显示错误。

有没有办法做到这一点?

【问题讨论】:

  • 到目前为止你的尝试在哪里?
  • 那行不通
  • @ths 在没有办法的情况下如何尝试?我正是要这些。
  • 至少向我们展示HTML 结构,以便我们重现您的问题。

标签: javascript material-design


【解决方案1】:

如果这是你的元素:

<div style="width:500px;" id="d">Birth settlement</div>

将文本放在一个跨度内并计算父长度 - 子长度

document.getElementById('l').textContent = document.getElementById('d').offsetWidth - document.getElementById('s').offsetWidth;
<div style="width:500px;" id="d"><span id="s">Birth settlement</span></div>
<span id="l"></span>

【讨论】:

  • 这里的问题是Birth settlement会包含一个错误,这会影响结果。这就是为什么我问的是文本而不是元素
  • 我不明白。我的 sn-p 给你文本的宽度。
  • 您的文本是固定大小的,而我的文本可能已经包含错误。在同一个标​​签内。