Inline-block span (внутри html td) текстовый многоточие не выполняется для длинных слов

Question

Моя цель - создать ячейку внутри таблицы HTML с кнопкой расширения.

Это HTML-код, который я использовал:

<td>
  <span class='outer'>
    <button>+</button>
    <span class='inner'>Sed eu nisi sit amet</span>
  </span>
</td>

Внешний диапазон отцентрирован: он содержитКнопка и некоторый текст.

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

Все хорошо, кроме случаев, когдаУ меня есть слово, которое не вписывается в тд.Я думал, что переполнение: скрытый + переполнение текста: многоточие будет достаточно, но у меня есть проблема.

Демонстрация доступна на http://jsfiddle.net/omanovitsh/HYDss/54/

Answer 1

Попробуйте что-то вроде:

.table2 .inner {
    text-overflow: ellipsis;
    max-width: 2em;
    white-space: nowrap;
}

Максимальная ширина (или просто используйте ширину, если хотите) заставляет переполнение сработать.

Answer 2

Во-первых, как правило, вы хотите избежать размещения элементов уровня блока во встроенных элементах, и это один из таких случаев. Смотрите здесь:

http://www.w3.org/TR/REC-html40/struct/global.html#block-inline

Обратите внимание: «Как правило, элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока. Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. В этом структурном различии заложена идея создания элементов блока». "большие структуры, чем встроенные элементы."

Что касается CSS, вы бы сказали:

.table2 p
{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width: 100%;
}

Что касается HTML, вам нужно изменить span s на div s:

<td>
    <div class='outer'>
        <button>+</button>
        <div class='inner'><p>Sed eu nisi sit ametametamet</p></div>
    </div>
</td>

В противном случае установка ширины в 100% для элемента p не сможет вписать его ширину в родительский элемент, поскольку родительским элементом является span, который является встроенным элементом.

Спасибо.

Пожалуйста, смотрите здесь: http://jsfiddle.net/VivekVish/HYDss/76/