如何压缩内容以使其适合 DIV

Question

在我的 webApp 中，我收到了来自 xml 的关注

<XMLNode>
      <b><font color='#2C5E87' size='13pt'>blah blah</font></b>
      <br>
      </textformat>
      <textformat blockindent='-15'>
      <li>blah</li>


      <b><font color='#2C5E87' size='13pt'>blah blah blah</font></b>
      <br>
      </textformat>
      <textformat blockindent='-15'>
      <li>blah blah</li>

      </textformat>
      <b><font color='#2C5E87' size='13pt'>blah blah blah</font></b>
      <br>
      <textformat leading='-1'>
      <p>blah blah blah blah blah blah </p>
      </textformat>
    </XMLNode>

现在我想在固定大小的 Div 中显示 <XMLNode></XMLNode> 内的内容 我的 JavaScript 代码是

var temp = $(xml).find("XMLNode").text();
$("#DIV_ID").html(temp);

理论上它应该可以工作，但文本很大，无法放入我的 DIV。

我的 Div 的 CSS 是，

#DIV_ID
{
    position:absolute;
    top:10px;
    height:200px;
    width:250px;
    top:32px;
    overflow:hidden;
}

这里有什么问题？？我如何压缩文本以适应该 DIV。我目前正在IE8上试用它

Answer 1

你的 HTML 中有很多奇怪的东西：

<XMLNode>
      <b><font color='#2C5E87' size='13pt'>blah blah</font></b>
      <br>
      </textformat>
      ...

所以你关闭了</textformat>，但你还没有打开它..？

而且我不知道您使用的是哪种文档类型，但<font> 元素在 HTML 4.01 中已弃用。你为什么还要使用它？您的 XMLNode 中的内容是非常糟糕的 html。

例如，您还有<li>blah</li>。但是您的列表项不包含在（无）有序列表中，例如：

<ul>
   <li>blah</li>
</ul>

那么为什么不用简单但高效的<p> 标记和<strong> 而不是<b> 替换所有这些html，这样您就可以在CSS 中轻松控制它。

HTML 只是要求被错误地解释。所以清理它会解决所有问题。

像这样：

<XMLNode>
      <p class="strong">blah blah</p>
      <ul>
          <li>blah</li>
      </ul>

      <p class="strong">blah blah blah</p>
      <ul>
          <li>blah blah</li> 
      </ul>

      <p class="strong">blah blah blah</p>
      <p>blah blah blah blah blah blah</p>
</XMLNode>

CSS：

#div_id {
    position:absolute;
    top:10px;
    height:200px;
    width:250px;
    top:32px;
    overflow:hidden;
}

p {
    color: #2C5E87;
    font-size: 14px;
}

p.strong {
    font-weight: bold;
}

Answer 2

关于fontsize属性：

此属性将字体大小指定为数字或相对值。数值范围从 1 到 7，其中 1 是最小的，3 是默认值。它可以使用相对值来定义，例如 +2 或 -3，将其设置为相对于元素的 size 属性的值，或者相​​对于默认值 3（如果不存在）。

不允许使用 pt 或 px 值。

您还应该阅读same page 中关于字体标签的以下内容：

不要使用这个元素！虽然曾经在 HTML 3.2 中标准化，但在 HTML 4.01 中已被弃用，同时所有与样式相关的元素同时在 HTML 5 中被淘汰。

使用 CSS 定义字体大小，例如：

font-size: 10px;

Answer 3

在你的 CSS 中创建新的 CSS 规则：

#DIV_ID b font {font-size: 10px !important;}

Answer 4

您是否尝试过使用px 而不是pt？所以size='13px'、pt 用于打印，不应用于屏幕字体大小。