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.
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.
EDIT: 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>
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");
}
})
Now used to floating
as like this
a{
background:green;
min-height:200px;
float:left;
}
live demo http://tinkerbin.com/3Ho3Af9c
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.