1

I am trying to display list in Table. But text overflow issue raised.

How to fix this issue with css? Kindly guide me.

.pkgtable {
  width: 100%;
  table-layout: fixed;
}

.pkgtable th,
td {
  vertical-align: top;
}

.pkgtable ul {
  font-size: 10px;
  line-height: 20px;
  width: 100%;
  list-style-type: square;
}

.pkgtable li {
  margin-left: -12px;
  text-align: left;
  text-transform: uppercase;
}

screenshot

2
  • Please share minimal runnable code snippet. Commented Dec 19, 2024 at 4:46
  • ever considered using the native css flex-box property? It does wonders with minimal adjustments. here's my favorite documentation Commented Dec 21, 2024 at 17:50

2 Answers 2

1

Add word-wrap and overflow properties to the table cells to handle long text:

.pkgtable {
    width: 100%;
    table-layout: fixed;
}

.pkgtable th, .pkgtable td {
    vertical-align: top;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pkgtable ul {
    font-size: 10px;
    line-height: 20px;
    width: 100%;
    list-style-type: square;
    padding-left: 20px;
}

.pkgtable li {
    margin-left: -12px;
    text-align: left;
    text-transform: uppercase;
}

Note:- if you will get any further issues change the above css as per your scenario, mainly you have to play with overflow and word-wrap properties.

Sign up to request clarification or add additional context in comments.

Comments

0

Here is a working example of CSS that fixes the problem. The key fix is adding "width: 100%" to the ".pkgtable li" element. This ensures that the list items stay contained within their table cell and prevents any overflow.

.pkgtable {
  width: 100%;
  table-layout: fixed;
}

.pkgtable th,
td {
  vertical-align: top;
  border: 1px solid #ddd;
  padding: 10px;
}

.pkgtable ul {
  font-size: 10px;
  line-height: 20px;
  width: 100%;
  list-style-type: square;
  padding-left: 20px;
  margin: 0;
}

.pkgtable li {
  margin-left: -12px;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}

On this image you can see the final result:

Image of the problem

Comments

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.