跨越文本边界重叠本身

在我的管理部分的网站上，我有能力编辑以前发布的博客。它工作正常但它有点难看，我找不到足够的CSS来解决这个问题。跨越文本边界重叠本身

基本上每个博客中是这样的：

<div> 
    <span class="edit" contenteditable="true"> 
     this is an editable title" 
    </span> 
</div> 

<div> 
    <span class="edit" contenteditable="true"> 
     This paragraph contains a blog post which is editable by the user. It looks a little strange. and it looks even worse if there is a line-wrap 
    </span> 
</div>

和CSS是

.edit{ 
    background-color:#FFD685; 
    border:1px solid #998050; 
    padding:3px; 
}

跨度重叠海誓山盟，它看起来非常奇怪。如果我脱掉padding:3px;它看起来更好，但长文本的文本包装仍然看起来很糟糕。最终，我希望它是线的大小，如果有包装盒的高度将包括没有他们之间的边界。

来源

2014-09-12 173901

如果我添加display：inline-block到.edit类，看起来会更好。然而，我不确定结果是否是您正在寻找的 - 您怎么看？ – Candlejack 2014-09-12 13:19:08

跨度为什么需要边框？你期待的效果是什么？ – j08691 2014-09-12 13:21:36

演示：http://jsfiddle.net/z7cgu97q/3/

下面的代码只需添加到您的CSS：

display:block;

<span>是display:inline默认情况下，让你添加的边框和填充实际上并不影响它的大小。你看到的重叠，因为边界/填充的宽度大于行高

来源

2014-09-12 13:18:58

您还可以在span元素上添加float：left，以保持第一个跨度元素宽度为 – Teo 2014-09-12 13:21:27

的技巧。非常感谢！ – 173901 2014-09-12 13:46:11

很高兴为你效劳！ – 2014-09-12 13:46:54

跨越文本边界重叠本身

回答

相关问题