Home/ Questions/Q 8542637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T12:06:57+00:00

I have an background image for a menu bar as follows and it has

  • 0

I have an background image for a menu bar as follows

menu

and it has four constant text displayed on each of the box. right most box is empty place. This image is made with all those static four vertical bars.

Now the problem is those four texts are so dynamic and are of variable lengths for different situation. Because of the variable lengths, its overlapping with those vertical bars when the texts not able to accommodate inside the box.
What is the best option to deal with this scenario using styling or another way.?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Case 1: Using Borders

    You can give the links a border-right instead of relying on the image.

    .nav li a {border-right: 2px solid #000;}

    Case 2: Using Ellipsis

    You can give a text-ellipsis for those links and make sure they come fit inside the lines:

    .nav li a {max-width: 150px; text-ellipsis: ellipsis; overflow: hidden; display: inline-block;} /* Get this thing right */
    • 0