Rozważmy następujący przykład: ( tutaj pokaz na żywo )
$(function() {
console.log("width = " + $("td").width());
});
td {
border: 1px solid black;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Hello Stack Overflow</td>
</tr>
</tbody>
</table>
Wynik to width = 139
:, a wielokropek się nie pojawia.
Czego tu brakuje?
width
aheight
komórki tabeli są zawsze używane jako minimalna szerokość i wysokość. Komórki tabeli są różne!Odpowiedzi:
Najwyraźniej dodając:
rozwiązuje również problem.
Innym możliwym rozwiązaniem jest ustawienie
table-layout: fixed;
do stołu, a także ustawienie gowidth
. Na przykład: http://jsfiddle.net/fd3Zx/5/źródło
display: table-cell
(domyślnie dlatd
elementów) nie akceptują szerokości.display: block;
w pewnym sensie niweczy cel używania stołu. Podoba mi się tatable-layout: fixed;
opcja, działała dobrze.table-layout:fixed
rozdziela szerokość kolumn w mniej inteligentny sposób. Czy istnieje inna opcja, która przypisze szerokość kolumny w ten sam sposób,table-layout: normal
a mimo to poprawnie wyświetli wielokropek?Ważne jest również, aby umieścić
Na zawierającą tabelę, więc działa dobrze również w IE9 (jeśli używasz max-width).
źródło
Jak powiedziano wcześniej, możesz używać,
td { display: block; }
ale to przeczy celowi używania stołu.Możesz użyć,
table { table-layout: fixed; }
ale może chcesz, aby zachowywał się inaczej dla niektórych kolumn.Dlatego najlepszym sposobem na osiągnięcie tego, co chcesz, byłoby zawinięcie tekstu w a
<div>
i zastosowanie CSS do<div>
(a nie do<td>
) w następujący sposób:źródło
Spróbuj użyć
max-width
zamiastwidth
, tabela nadal automatycznie obliczy szerokość.Działa nawet w
ie11
(z trybem zgodności IE8).jsfiddle .
źródło
Strona demonstracyjna
W przypadku tabel z dynamiczną szerokością znalazłem poniższy sposób na uzyskanie zadowalających wyników. Każdy,
<th>
kto chce mieć możliwość przycinania tekstu, powinien mieć wewnętrzny element zawijający, który otacza zawartość<th>
zezwoleniatext-overflow
na pracę.Skutecznie spowoduje to, że szerokość elementu zostanie „powiązana” z szerokością widocznego obszaru (okna przeglądarki) i spowoduje responsywne przycinanie treści. Ustaw
vw
jednostki na zadowalającą wymaganą wartość.Minimalny CSS:
Oto gotowe do uruchomienia demo:
źródło
Po prostu oferuję alternatywę, ponieważ miałem ten problem i żadna z innych odpowiedzi nie przyniosła pożądanego efektu, którego chciałem. Zamiast tego użyłem listy. Teraz semantycznie informacje, które wyświetlałem, można było traktować zarówno jako dane tabelaryczne, jak i dane wymienione.
W końcu to, co zrobiłem, to:
Więc zasadniczo
ul
jesttable
,li
jesttr
ispan
jesttd
.Następnie w CSS ustawiłem
span
elementy na bedisplay:block;
ifloat:left;
(wolę tę kombinację,inline-block
ponieważ będzie działać w starszych wersjach IE, aby wyczyścić efekt float, patrz: http://css-tricks.com/snippets/css/clear- fix / ) i mieć również elipsy:Następnie wszystko, co musisz zrobić, to ustawić
max-widths
zakresy, a to nada liście wygląd tabeli.źródło
<td><ul>...</ul></td>
)? Wydaje mi się, że to nie działa :(Zamiast używać wielokropka do rozwiązania problemu przepełnienia tekstu, odkryłem, że wyłączone i stylizowane dane wejściowe wyglądały lepiej i nadal pozwalają użytkownikowi przeglądać i wybierać cały ciąg, jeśli zajdzie taka potrzeba.
Wygląda jak pole tekstowe, ale można je wyróżniać, dzięki czemu jest bardziej przyjazny dla użytkownika
źródło
Sprawdź
box-sizing
właściwość css swoichtd
elementów. Miałem problem z szablonem css, który ustawia go naborder-box
wartość. Potrzebujesz zestawubox-sizing: content-box
.źródło
Zostaw swoje stoły tak, jak są. Po prostu zawiń zawartość wewnątrz TD za pomocą zakresu z zastosowanym obcięciem CSS.
źródło
Jeśli nie chcesz ustawiać max-width na td (jak w tej odpowiedzi ), możesz ustawić max-width na div:
function so_hack(){}
http://jsfiddle.net/fd3Zx/754/function so_hack(){}
Uwaga: 100% nie działa, ale 99% załatwia sprawę w FF. Inne nowoczesne przeglądarki nie potrzebują głupich hacków div.
źródło