Вопросы Теги

Наложение PNG на изображение

Демо-страница

Для таблиц с динамической шириной я нашел способ ниже для получения удовлетворительных результатов. Каждый , который хочет иметь возможность обрезанного текста, должен иметь внутренний элемент обертывания, который обертывает содержимое , чтобы разрешить text-overflow работать.

Тогда реальным трюком является установка max-width (на ) в единицах vw .

Это эффективно приведет к тому, что ширина элемента будет «привязана» к ширине окна просмотра (окно браузера) и приведет к отсечению пользовательского контента. Установите единицы vw на требуемое значение.

Минимальный CSS: 

th{ max-width:10vw; }

th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Вот демонстрационная версия: 

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

    
        

            
                
Some long title

            		
            
                
Short

            		
            
                
medium one

            		
            
                
endlessly super long title which no developer likes to see

            		
        

    
    
        

            -
            -
            -
            very long text here
1
задан RN92 18 March 2019 в 02:44
поделиться