行为元素的最小宽度

行为元素的最小宽度

本文介绍了in-inline(不是inline-block)行为元素的最小宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在一个contenteditable div上设置最小宽度,在其旁边的一些其他元素必须保持与div内联。

I would like to set the min-width on a contenteditable div with some other elements next to it that must stay inline with the div.

ve seen使用inline-block,但是我不能使用inline-block行为。当inline-block开始包装时,它仍然像一个块元素,我需要div作为一个内联元素。我想象的解决方案将需要不仅仅是CSS,但似乎很难设置任何事件,当div的文本更改。将欢迎包含javascript和/或jQuery的解决方案。

Every solution I've seen uses inline-block, but I can't use inline-block behavior. When inline-block starts wrapping, it still behaves like a block element, and I need the div to behave as an inline element. I would imagine the solution would require more than just CSS, but it seems very difficult to set any event for when the div's text changes. A solution involving javascript and/or jQuery would be welcome.

编辑:这里是我想要做的简化版本。如果用户输入的文字超过页面宽度,则inline-block和block之间的行为会有所不同,这就是我所关心的。

Here's a simplified version of what I'm trying to do. If the user would type more text than the page is wide, there is a difference in behavior between inline-block and block, and that's what I am concerned with.

<style type="text/css">
label {
    width: 40px;
    height: 40px;
}
#container {
    font-size: 32px;
}
#content {
    display: inline;
    min-height: 37px; /* doesn't work on inline elements */
    min-width: 80px; /* also doesn't work on inline elements */
}
</style>

<div id="container">
    <input type="radio" />
    <label>
        <span></span>
    </label>
    <span>(A)</span>
    <div id="content" contenteditable="true" unselectable="off">test</div>
</div>


推荐答案

好的,这里是我想出的答案jQuery)。任何人都可以给我建议删除一些这些事件,可能不会改变div的内容或在div周围放置边框? (我也关心剪切/粘贴)。

Okay, here's the answer I came up with (in jQuery). Can anyone give me suggestions on leaving out some of these events that might not change the div's content or place a border around the div? (I'm also concerned with cut/paste).

$('#content').bind('blur focus load resize scroll click dblclick ' +
        'mousedown mouseup mousemove change ' +
        'select keydown keypress keyup', function () {
    if($(this).width() <= 80) {
        $(this).css("display", "inline-block");
    }
    else {
        $(this).css("display", "inline");
    }
})

这篇关于in-inline(不是inline-block)行为元素的最小宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 02:49