OpenLayers 6 how to add line breaks to text labels?

Question

I'm trying to add simple line breaks to my text labels in ol 6 using \n but somehow both text line drift far apart as soon as I zoom out. It's weird. I created a simple fiddle, just click on the button "set style".

The relevant part:

var createTextStyle = function (feature, resolution) {
  
  return new ol.style.Text({
    text: 'first line' + '\n' + 'second line'
  });
};

function polygonStyleFunction(feature, resolution) {
  return new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 1,
    }),
    text: createTextStyle(feature, resolution),
  });
}

The first line should be above the second text line but it's not.

https://jsfiddle.net/a7cbgtd9/ The \n should not be a problem here because it works in this example:

https://openlayers.org/en/latest/examples/vector-labels.html Im even using the same ol version.

Answer 1

In the code above there is definitely not all the relevant code, but looking into your JSFiddle it was easy to find the culprit, which is the following CSS:

div {width:100px; height:100%;}

It interferes with all the OpenLayers <div> sections and the consequence is mangled map display.