0

Is there any way to apply something like text-overflow: ellipsis to plotly table cell? I want to able to cut the word if its not fit in the cell.

Code:

 const dbTableData = [
      {
        type: 'table',
        header: {
          values: [data],
          align: 'center',
        },
        cells: {
          values: [data],
          align: 'center',
          height: 30,
        },
      },
    ];

Current problem:

enter image description here

Improve this question
5
  • Do you have a reproducible example ? Commented Dec 3, 2022 at 15:04
  • codepen.io/cbsanal/pen/rNKQwRb here is a sample. Commented Dec 3, 2022 at 15:24
  • Do you want to cut it or wrap it in the same cell? Commented Dec 3, 2022 at 15:25
  • wrap would be better but it is also okay to cut and add ... to end of it Commented Dec 3, 2022 at 15:27
  • 1
    Cell content already behaves like having style overflow: hidden; text-overflow: clip; applied (word is cut, without padding and align: center it looks like the text overflows but it doesn't, if you add a leading whitespace and set align: left to the cells it is more obvious). It would be better though to shave more options like setting a fixed/min padding and the possibility to wrap (break-word) and/or to add an ellipsis, but there is no easy way to do that with plotly.js. The complicated way would be to do that by hand using d3. Commented Dec 3, 2022 at 18:34
Related questions
0
Plotly chart area cuts off text
2
R - Handle long labels in plotly
1
How to show vertical TEXT using plotly js?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.