svg tspan problem - chrome vs firefox - multiline text

Question

im generating SVG with some multiline text using text > tspan in svg, and found firefox ignores styling display:none and counts height of hidden element. I intend to hide some of the tspan using responsive media queries in css

Live test: https://codepen.io/peminator/pen/rNoWVrO

body {
  font-size: 15px;
}

svg tspan.t3 {
  display: none;
}

<svg stroke="#CCC" fill="#C00">
          <text>
            <tspan class="t1" x="0" dy="1em">AAA</tspan>
            <tspan class="t2" x="0" dy="1em">BBB</tspan>
            <tspan class="t3" x="0" dy="1em">CCC</tspan>
            <tspan class="t4" x="0" dy="1em">DDD</tspan>
            <tspan class="t5" x="0" dy="1em">EEE</tspan>
          </text>
    </svg>

In Firefox, the space for the hidden tspan is still added. In Chrome, it is omitted. What is the corect way to dsiplay such multiline text to look same way, if some lines need to be hidden based on client viewport?

Answer 1

As a quirky workaround you can apply a font-size:0 to the hidden tspans.

body {
  font-size: 15px;
}

tspan.t3 {
  display: none;
  font-size: 0;
}

<svg>
      <text stroke="#CCC" fill="#C00">
        <tspan class="t1" x="0" dy="1em">AAA</tspan>
        <tspan class="t2" x="0" dy="1em">BBB</tspan>
        <tspan class="t3" x="0" dy="1em">CCC</tspan>
        <tspan class="t4" x="0" dy="1em">DDD</tspan>
        <tspan class="t5" x="0" dy="1em">EEE</tspan>
      </text>
</svg>