In the task graph, task titles are always truncated (the complete title can be seen in the tooltip).
Using text-overflow: ellipsis would leave the complete title when enough space is available. Is that possible?
mcorteel | |
Feb 6 2017, 9:37 AM |
F2589649: Screen Shot 2017-02-06 at 4.15.50 AM.png | |
Feb 6 2017, 12:23 PM |
F2589639: Screen Shot 2017-02-06 at 4.12.45 AM.png | |
Feb 6 2017, 12:23 PM |
In the task graph, task titles are always truncated (the complete title can be seen in the tooltip).
Using text-overflow: ellipsis would leave the complete title when enough space is available. Is that possible?
With text-overflow: ellipsis; and no truncation:
With text-overflow: ellipsis; and no overflow-x: auto; on the container:
And so on.
Feel free to submit a patch if you can get this working. Tricky cases to test: mobile, rows with no text, one very long word with no spaces ("MMMM").
The behavior you describe is desirable, but it isn't clear that it's achievable.
Thank you for your quick reply. Indeed, this is tricky. Apparently, max-width has to be set on cells for overflow to work.
Changing the classes with the following properties may be a solution:
.aphront-table-view { min-width: 500px;/* This should probably be responsive */ } .aphront-table-view td.object-link { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
It overflows correctly and the whole table still has a minimum width so that it scrolls horizontally on mobile devices. I think that the min-width should be larger on mobile devices (using an @media rule) because they can't show the tooltip and have will have to scroll anyway.