Как установить ширину <td>, чтобы визуально обрезать отображаемое содержимое? - PullRequest
Новая
       16

Как установить ширину <td>, чтобы визуально обрезать отображаемое содержимое?

20 голосов
/ 26 января 2009

Я пытаюсь установить ширину столбца таблицы, которая работает нормально, пока не дойдет до точки, где дочерние элементы будут визуально усечены ... тогда она не будет иметь меньшего размера. («визуально усеченный» - то, что не подходит, похоже, скрыто за следующей колонкой)

Вот пример кода, демонстрирующего мою проблему: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // shrink and set width size
        td1.currentShrinkCount--;
        td1.width = td1.currentShrinkCount;  // does nothing if truncating!

        // set reporting values in right cell
        td2.innerHTML = "Desired Width : [" 
                    + td1.currentShrinkCount 
                    + "], Actual : [" 
                    + td1.offsetWidth + "]";

        // Stop shrinking
        if( 1 >= td1.currentShrinkCount)
            window.clearInterval(intervalID);
    }
</script>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td id="td1">
                Extra_long_filler_text
            </td>
            <td id="td2">
                Desired Width : [----], Actual : [----]
            </td>
        </tr>
    </table>

    <button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>

Я пытался установить ширину по-разному, включая 

td1.offsetWidth = td1.currentShrinkCount;

и 

td1.width = td1.currentShrinkCount + "px";

и 

td1.style.width = td1.currentShrinkCount + "px";

и 

td1.style.posWidth = td1.currentShrinkCount;

и 

td1.scrollWidth = td1.currentShrinkCount;

и 

td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;

и 

td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;

и 

td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;

Я понимаю, что, возможно, я мог бы использовать DIV, но я бы предпочел этого не делать, поскольку таблица генерируется из связанного элемента управления, и я не хочу переписывать элементы управления asp.net.

Сказав это, я подумал, что в качестве последнего шага я мог бы по крайней мере обернуть содержимое каждого 'td1 с помощью DIV, а переполнение позаботится обо всем, но даже заменит 

<td id="td1">
    Extra_long_filler_text
</td>

с 

<td id="td1" style="overflow:hidden;">
    <div style="margin=0;padding:0;overflow:hidden;">
        Extra_long_filler_text
    </div>
</td>

не работает.

Кто-нибудь знает, как я могу установить ширину, чтобы визуально обрезать ее содержимое?

Кстати, мой целевой браузер - IE7. Другие браузеры сейчас не важны, так как это внутреннее приложение.

Ответы [ 5 ]

30 голосов
/ 26 января 2009

Я только что попытался добавить table-layout: fixed; к <table>, и это сработало у меня в IE7.

В фиксированном макете таблицы горизонтальный макет зависит только от ширины таблицы, ширины столбцов, а не от содержания ячеек

Проверьте документацию .

4 голосов
/ 26 января 2009

CSS Solution

«Усечение» может быть не тем словом, которое вы ищете. Вы можете просто захотеть скрыть переполненные символы. Если это так, посмотрите на css-свойство «overflow», которое будет скрывать любой контент, выходящий за объявленные пределы его контейнера. 

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

Решение Javascript

Если вы действительно хотите обрезать текст в контейнере, вам придется удалить один символ справа, проверить ширину родительского элемента и продолжить удаление символов и проверить ширину родительского элемента, пока ширина родительского элемента не будет соответствовать заявленная ширина. 

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}
2 голосов
/ 26 января 2009 
<td id="td1" style="overflow-x:hidden;">

Должно быть 

<td id="td1" style="overflow:hidden;">

overflow-x - это атрибут Microsoft CSS, который теперь является частью CSS3. Я бы придерживался более старого атрибута переполнения.

EDIT:

Как упоминает Паоло, вам также необходимо добавить макет таблицы: исправлено; и укажите ширину таблицы. Полный пример приведен ниже. 

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>
1 голос
/ 26 января 2009

Насколько я знаю, ячейка таблицы всегда будет растягиваться, чтобы вместить ее содержимое.

Задумывались ли вы об использовании Javascript для динамического усечения данных в ячейках таблицы, которые содержат более определенного объема контента? В качестве альтернативы, вы могли бы сделать это проще на стороне сервера.

0 голосов
/ 26 января 2009

Вы можете использовать jQuery или обычный javascript, чтобы окружить содержимое ваших ячеек тегами div и установить фиксированную ширину и переполнение: вместо этого скрыть их. Не красиво, но это сработало бы.

ETA: 

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

Поскольку DIV является ограничивающим элементом, именно здесь должна быть установлена ​​ширина.

...