Question

我对css不太好，所以这可能是一个愚蠢的问题，但是......

我有一个表单，其上有一些javascript，因此当用户键入其中一个表单输入时，文本类型出现在同一页面上的div中。

分钟的div是宽度：960px。因此，当我输入表单输入并且文本出现在div中时，当它达到960px时，它需要一个新行并拧紧我的布局。

编辑：我希望div的最大值为960px x 30px，我希望文本能够适应但不会让它更大，而不是溢出到新行并且不会出现滚动条。如果文本仍然存在，那就不可见了。就像它继续超越div但只是不可见。那就是

我已经尝试在div上设置max-height和max-width但是这不起作用（可能是因为在读取css之后javascript正在对它进行操作？）

我还设置了表单输入的最大长度，但因为那个字符和一些字符更长/在大写等...这意味着一些句子看起来很短，其他句子很长，例如iiiiiiiiiiii和wwwwwwwwww（10 chars each）

关于如何解决这个问题的任何想法？

编辑：这是一些代码 - 表单输入的html

<div class="input text required">
    <label for="CampaignTitle">Title</label>
    <input name="data[Campaign][title]" type="text" maxLength="76px" id="CampaignTitle" />
</div>

更新的div：

<div id="titleBarWrap">
    <div id="titleBar" style="max-width:960px; max-height:76px;"></div>
</div>

css：

#topbar{background:url(../img/green/topBg.gif) repeat-x;height:67px;clear:both;}
#titleBarWrap{width:960px;margin:auto;font-size:32px;font-weight:bold;color:#FFF; line-height:67px;}
#mainCampContentWrap{width:960px;margin:auto;padding:24px;background:url(../img/green/mainCampContentWrapBg.gif) repeat-y;}

JS：

$('#CampaignTitle').keyup(function() {
    $('#titleBar').text(this.value);
});

Answer 1

我想：

overflow:hidden;

可以帮到你

Answer 2

如果我理解正确，那么你的div正在与文本一起成长？在那个原因你可以使用：

overflow: auto;

然后你的div将保持相同的大小，滚动条就会出现。此外，您可以使用以下内容：

word-wrap: break-word;

最后你可以插入javascript

<BR>

当文字达到一定长度时

限制div的宽度

2 个答案: