как сжать контент, чтобы он поместился внутри 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>

, теперь я хочу отображать содержимое внутри <XMLNode></XMLNode> в фиксированном размере. Div мой код javaScript теоретически

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

это должно работать, но текст огромен и не может поместиться в моем DIV.

CSS моего Div -

#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>

Так почему бы вам не заменить все эти html на простые, но эффективные теги <p> и <strong> вместо <b>, чтобы вы могли легко управлять им в своем 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

Об атрибуте font size:

Этот атрибут указывает размер шрифта в виде числового или относительного значения.Числовые значения варьируются от 1 до 7, где 1 - наименьшее, а 3 - значение по умолчанию.Он может быть определен с использованием относительного значения, такого как +2 или -3, которое устанавливает его относительно значения атрибута размера элемента, или относительно 3, значения по умолчанию, если оно не существует.

Нет pt или px значение допускается.

Дополнительно вы должны прочитать следующее на той же странице о теге шрифта:

Не используйте этот элемент!Хотя однажды нормализованная в 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 используется для печати и не должен использоваться для размеров шрифта экрана.