0

I'm trying to draw a limited dashed line with CSS, I mean that the number of dashes will be limited, For example, if the limit number will be 3 the line will be: _____ _____ _____

Currently, I'm using a percentage calculation to get the same result but not sure it's durable.

Current:

grid: { line: { stroke: theme.palette.secondary.main , strokeWidth: 1, strokeDasharray: "32% 2%"} },

Desirable:

grid: { line: { stroke: theme.palette.secondary.main , strokeWidth: 1, strokeDasharray: "1rem 0.2rem" numberOfdashes: 3} },
Ar26
  • 949
  • 1
  • 12
  • 29
  • Does this answer your question? [Control the dashed border stroke length and distance between strokes](https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes) – Sara Stoimenovska Nov 12 '20 at 08:45
  • Sara Stoimenovska no, I already know that. I'm trying to limit the number of dashes – Ar26 Nov 12 '20 at 08:51
  • _“but not sure it's durable”_ - meaning what, exactly? Sure, `32% 2%` look like what’s called “magic numbers” - but as long as your requirements for the number of dashes doesn’t change, those numbers should not need changing either. Not sure what the actual issue is supposed to be here then. – CBroe Nov 12 '20 at 08:57
  • I think with numberOfdashes, it will be much easier to edit and will react the same way for all screen sizes – Ar26 Nov 12 '20 at 09:46

0 Answers0