标签

Question

当我在标签后输入内容时，它会在标签的文本中连接 基本代码是：

<p contenteditable="true">Hello, can I speak to <b><label>name</label></b>please?</p>

label
{
     border: 1px solid black;
    float: none;
    padding: 0px 10px;
    cursor: pointer;
}

<p contenteditable="true">Hello, can I speak to <b><label>name</label></b>please?</p>

我需要的是当我从标签盒中输入一些内容时，不应该在please?文本之前与标签的文本绑定... css有什么问题...我找不到out..Thanks

Answer 1

编辑2

  

＆＃34;如果用户可以删除空格那么？＆＃34;

我的专柜回复是：

  

此代码的目的究竟是什么？

无论如何，这是最终编辑接受或离开它。

  

将<span contenteditable=true>...</span>中的每个细分包裹起来并用 分隔。如果我们希望<span>之间没有空格，那么我们可以使用（零宽度不间断空格）而不是 另请注意<label> 1}}和<p>标记包装<span> s。这保留了HTML结构。请参阅更新的代码段。

看到OP需要HTML / CSS解决方案 - 从不提及JavaScript / jQuery - 这是我能想到的最佳解决方案。所需的行为将超出HTML / CSS功能，并且需要JavaScript / jQuery。话虽如此，我相信这个解决方案会奏效。 <label>现在无法在其边框之外的文本中流血，因为 现在不可编辑，但每个单独的<span>都是可编辑的。解析时，外观上唯一的变化是蓝色轮廓。鉴于OP在句子中间有一个带边框的粗体文字，这不应该是一个问题。

修改

OP要求<p>内的所有内容都可以编辑。 OP担心的是<label>编辑在文本中出现的问题。在 之后放置的<label>似乎可以解决该问题。

将contenteditable="true"添加到<label>而不是<p>

<强>段

＆＃13;

＆＃13;

label {
  border: 1px solid black;
  float: none;
  padding: 0px 10px;
  cursor: pointer;
}

＆＃13;

<p><span contenteditable="true">Hello, can I speak to</span>&nbsp;<label><span contenteditable="true"><b>name</b></span></label>&nbsp;<span contenteditable="true">please?</span></p>

<p><span contenteditable="true">Hello, can I speak to</span>&#65279;<label><span contenteditable="true"><b>name</b></span></label>&#65279;<span contenteditable="true">please?</span></p>

＆＃13;

＆＃13;

＆＃13;