Question 80287 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to Fix Horizontal Text Overflow in React Table? – Javascript

I have a table in React that works well in a defaulted desktop view; however, when down scaled to a phone, this table significantly overflows with text.

All of my efforts to fix this thus far have been changing the table’s style component, changing the max-width, whiteSpace, and overflow properties for example. These have not worked however, and I am searching for someone who might have any ideas of what I could pursue to fix this.

Here is a picture of the problem:
enter image description here

Tags:

2

Answers


  1. 0

    If your table is simple (no ordering, grouping, searching, etc) as an alternative solution instead of table you may reach same display by using divs positioned flex. In mobile view then u may use power of responsivity

    Login or Signup to reply.
  2. 0

    if you still wanna do that ellipse thing, here is the solution.

    Given a fixed width for table (i.e; width 100% for table and table-layout as fixed)

     .text-ellipse{
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1; /* how many lines you wanna restrict */
    -webkit-box-orient: vertical;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search