I'm kinda stuck here and I'm looking for some ideas. I have a breadcrumb system which uses :before
and :after
tags for the arrows.
The maximum width for all the breadcrumbs put together is 735px
as that is the size of the container element.
Now; I need to restrict the length of each breadcrumb to stop them overflowing and to ensure that they all stay on one line. To do this, I will need to set a maximum width on the breadcrumb. However the max-width
will depend on the number of breadcrumbs which are currently visible.
I know that the easiest way would be to count the number of breadcrumbs present and set a fixed position by dividing the container width by the number of breadcrumbs, but this is not what I want - It would mean that breadcrumbs with a shorter title have a large gap, like below.
So I need to specify a max-width
, but the max-width
will depend on the width of the other breadcrumbs.
For example, if all the breadcrumbs have a fairly long title, the max-width
will need to be small enough to allow all breadcrumbs to fit in the container.
But if, say, five of the breadcrumbs have very short titles (ie 4 characters) and the fifth one has a longer title, I would want the max-width
to allow all the text on the last breadcrumb to be displayed, but still ensuring that the breadcrumbs still fit inside the container.
Sorry if this is too confusing. Here's a jsFiddle of my breadcrumbs so you can understand how they're structured. If you need any more information please let me know.
http://jsfiddle.net/5CLYt/
The second example in the jsFiddle shows how the max-width
needs to be dependant on the width of the other breadcrumbs, and not just the number of the breadcrumbs displayed.