Обрезать строку на основе ширины пикселей

Я пытаюсь сделать строку подходящей в определенной области (td) без разрыва строки. Проблема в том, что она должна...

  • При изменении размера
  • Установить N виды разрешения
  • Добавить ... в конце, когда это необходимо (и не нужно, когда это не нужно)
  • Примите изменения font-size, font-weight и font-family

Основываясь на ответах на вопрос Новона, я сделал следующий код:

CSS (//Просто добавление некоторых стилей для разрыва строки)

.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

jQuery (//Найдите все td, содержащие элемент .truncated. Получив реальную ширину (удалив содержимое и добавив его снова) в td. Применяя, если необходимо, minWidth на td)

jQuery('.truncated').closest('td').each(function() {
    var text = jQuery(this).text();
    var widthOriginal = jQuery(this).width();
    var widthEmpty = jQuery(this).text('').width();
    jQuery(this).text(text);
    if(widthOriginal >= widthEmpty){
        var width = (parseInt(widthEmpty) - 10) + 'px';
        jQuery(this).css('maxWidth', width);
        jQuery(this).text(text + '...');
    }
});

результат (как и ожидалось из приведенного выше кода):

result

но это должно быть:

how it should be

Я думал, может быть, попытаюсь найти первый line строки и удалить остальные, но не нашел способ сделать это (и это много "обходного пути" на мой вкус). Есть ли лучший способ сделать это?

Ответы

Ответ 1

Вы можете сделать это с помощью чистого CSS, см. ссылку для ссылки:

line clampin

Добавьте их в свой css:

.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 1; // amount of line you want
  -webkit-box-orient: vertical;  
}

Или вы можете попробовать clamp.js

https://github.com/josephschmitt/Clamp.js

Ответ 2

Усечение однострочного текста может быть легко достигнуто с использованием свойства css text-overflow, которое поддерживается всеми основными браузерами, включая IE с версии 6.

Дело в том, что только text-overflow мало что делает. Он определяет только то, что произойдет , когда текст переполняется контейнером. Поэтому, чтобы увидеть результаты, сначала нужно сделать переполнение текста, заставив его в одну строку. Также важно установить свойство overflow контейнера:

.truncated {
    display: block;
    white-space: nowrap; /* forces text to single line */
    overflow: hidden;
    text-overflow: ellipsis;
}

Пример jsFiddle: https://jsfiddle.net/x95a4913/

документация по переполнению текста: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Ответ 4

Оберните текст дважды, чтобы добиться этого:

<style type="text/css">

.relative_wrap {
    height: 1em;
    position: relative;
}

.absolute_wrap {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    top: 0px;
    white-space: nowrap;
}

</style>


<table>
    <tbody>
        <tr>
            <td>
                <div class="relative_wrap">
                    <div class="absolute_wrap">
                            LONG TEXT HERE
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Поскольку вы используете jQuery, это легко:

$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>');

Ответ 5

Если вы установите фиксированный формат таблицы и переполнение td как hidden, вы можете добавить эллипсис как float-right div, когда ширина прокрутки td больше его клиентской ширины.

Здесь CSS, который включает стили, чтобы предотвратить просачивание в таблице:

table {
  table-layout:fixed;
  white-space:nowrap;
  width:500px;
  border-spacing: 0px;
  border-collapse: separate;    
}

td {
  overflow:hidden;
  border:1px solid #ddd;
  padding:0px;
}

.hellip {
  padding-left:0.2em;
  float:right;
  background:white;
  position:relative;
}

JQuery

$('td').each(function() {
  if($(this)[0].scrollWidth > $(this).width()) {
    $(this).prepend('<div class="hellip"">&hellip;</div>');
  }
});

Демо на: http://jsfiddle.net/5h798ojf/3/