Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Вывод длинной строки при использовании тега PRE

Автор: Teleport 5.2.2009, 17:45

вывожу текст таким образом:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
</head>

<body>
 <table width="60%" border="1">
  <tr>
    <td width="50%">
    <pre>
    111
    22222
    3333333
    </pre>
    
    </td>
    <td width="50%">&nbsp;</td>
  </tr>
</table>

</body>
</html>

в данном случае тег pre работает замечательно. Но вот проблема возникает - если у меня вместо строки 3333333 есть строка 33333333333333333333333333333333333333444444444444444444444444444444444444444444455555555555555555555555555555566666666666666666666677777777777.
Тогда моя табличка начинает просто раздвигаться. Как решить проблему?
Думаю есть два способа:
1) Чтобы появлялась горизонтальная полоса прокрутки.
2) Чтобы переносился текст, когда дойдет до границы своего столбца...

Подскажите как реализовать эти два способа.

Автор: bars80080 5.2.2009, 18:55

засуньте в <div style="overflow-x: scroll; width: 100%;">

Автор: ksnk 5.2.2009, 19:19

2) на http://forum.dklab.ru/viewtopic.php?t=9524&postdays=0&postorder=asc'е было много тем и приличных решений про переносы символов.
Самое простое - расставить через каждые X символов - символ преноса.

Цитата

Код


var delim = document.all?'\u00ad':'\u200b';
  text.replace(/(<[^>]+>|\S{10})/g,delim+"$1");

Автор: Teleport 5.2.2009, 20:49

с полосой прокрутки вроде бы решил вот так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>

<style type="text/css">
<!--
#apDiv1 {
    position: relative;
    width:100%;
    height:500px;
    z-index:1;
    overflow: scroll;
}
-->
</style>
</head>

<body>
 <table width="60%" border="1"  height="10">
  <tr>
    <td width="50%">
    <div id="apDiv1">
    <pre>
   
    111
    22222
    3333333444444444444444444444444444444444444444444445555555555555555555555555555
</pre></div>    </td>
    <td width="50%">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Автор: Teleport 5.2.2009, 21:54

Блин! Opera и FF этот код съели, а вот IE7 не съедает!!! Как быть??