How can I wrap the text in IE

HTML & CSS
,
1

In chrome and Firefox it display correctly but in Internet Explorer the text overlaps how can I display the text correctly so that it works for IE on all browsers

In chrome and Firefox it displays like this I want it display the same for IE

Code CSS

.chart[id*="Chart_Column"] .ct-label.ct-horizontal.ct-end {
    padding: 5px 0 0 0;
    font-size: 12px;
}
.ct-chart-bar .ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    text-anchor: start;
}
<style>…</style>
.chart[id*="Chart_Column"] .ct-label {
    font-size: 14px;
}
.ct-label.ct-horizontal.ct-end {
    -webkit-box-align: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -webkit-box-pack: flex-start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    text-align: left;
    text-anchor: start;
}
.ct-chart-bar .ct-label, .ct-chart-line .ct-label {
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.ct-label {
    color: #111111;
    fill: #111111;
}

HTML

<g class="ct-labels"><foreignObject style="overflow: visible;" x="40" y="124" width="78.9625" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Avg Players Per Match</span></foreignObject>
<foreignObject style="overflow: visible;" x="118.9625" y="124" width="78.9625" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Depth of Selection</span></foreignObject>
<foreignObject style="overflow: visible;" x="197.925" y="124" width="78.9625" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">% of overs bowled</span></foreignObject>
<foreignObject style="overflow: visible;" x="276.88750000000005" y="124" width="78.9625" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">% of balls faced</span></foreignObject>
<foreignObject style="overflow: visible;" x="355.85" y="124" width="78.96249999999998" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">% of matches played</span></foreignObject>
<foreignObject style="overflow: visible;" y="100.88888888888889" x="10" height="23.11111111111111" width="20"><span class="ct-label ct-vertical ct-start" style="height: 23px; width: 20px" xmlns="http://www.w3.org/2000/xmlns/">0</span></foreignObject>
<foreignObject style="overflow: visible;" y="77.77777777777777" x="10" height="23.11111111111111" width="20"><span class="ct-label ct-vertical ct-start" style="height: 23px; width: 20px" xmlns="http://www.w3.org/2000/xmlns/">20</span></foreignObject>
<foreignObject style="overflow: visible;" y="54.666666666666664" x="10" height="23.111111111111107" width="20"><span class="ct-label ct-vertical ct-start" style="height: 23px; width: 20px" xmlns="http://www.w3.org/2000/xmlns/">40</span></foreignObject>
<foreignObject style="overflow: visible;" y="31.555555555555557" x="10" height="23.111111111111114" width="20"><span class="ct-label ct-vertical ct-start" style="height: 23px; width: 20px" xmlns="http://www.w3.org/2000/xmlns/">60</span></foreignObject>
<foreignObject style="overflow: visible;" y="1.5555555555555571" x="10" height="30" width="20"><span class="ct-label ct-vertical ct-start" style="height: 30px; width: 20px" xmlns="http://www.w3.org/2000/xmlns/">80</span></foreignObject></g>
2

Could you please post your HTML too.

3

I added the html

4

Which version of IE is showing the problem?

5

ie11

6

It seems like IE11 combines the overflow: visible with a white-space: nowrap.
Have you tried to declare white-space: normal to correct this?

I think this could depend on the document type. I see it’s an XML file, could you post a working demo so maybe someone can test in their IE (I can’t).

Or at least tell what Doctype you have.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.