Word Break/ Word Wrap not working in jsf panel - css

Question

I have a jsf page with 3 panels and each panel and columns are assigned css as below. I gave word wrap to each column b but sometimes word wrap does not work. I tried giving a width = 33% for each induvidual panel but still didnt seem to work. Can anyone help me on this?
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<style>
.shadowpanel.ui-panel .ui-panel-content {
border-radius: 5px;
background: #E6ECF0;
box-shadow: 5px 5px 5px #888888;
}
.ui-chkbox-box
{
background: white !important;
}
.columnA{}
.columnBwithwordBreak{
width:60%;
word-wrap: break-word;
}
</style>
<p:panel styleClass="shadowpanel" style="border: none">
<h:panelGrid columns="3" styleClass="topVerticalAlign" >
<h:panelGrid>
<p:panelGrid style="width: 100%;font-size: 15px;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="Dump Header" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="2" style="" columnClasses="columnA,columnBwithwordBreak">
<h:outputText style="font-weight: bold;white-space: pre" value="Sequence ID of Dump : " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(0)}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Dump Date: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(1)}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Dump Time: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(2)}" styleClass="courierFont" />
</h:panelGrid>
</h:panelGrid>
<h:panelGrid>
<p:panelGrid style="width: 100%;font-size: 15px;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="Cover Page" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="2" style="" columnClasses="columnA,columnBwithwordBreak" >
<h:outputText style="font-weight: bold;white-space: pre" value="Size of SVM: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().svm}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Number of Active I Streams: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().aci}" styleClass="courierFont"/>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid style="" styleClass="topVerticalAlign">
<h:panelGrid>
<p:panelGrid style="font-size: 15px; width:100%;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="General Registers" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="8" style="" columnClasses="columnA,columnBwithwordBreak,columnA,columnBwithwordBreak,columnA,columnA,columnBwithwordBreak,columnA" >
<h:outputText style="font-weight: bold;white-space: pre" value="R0:" />
<p:commandLink style="color: #1484e6" action="#{coverPageProcess.newReg}" update="currentRegisterValue,regName" value="#{postProcessedDump.getRegisterData().regValues[0]}">
<f:setPropertyActionListener target="#{registerData.selectedRegister}" value="R0" />
</p:commandLink>
<h:outputText style="font-weight: bold;white-space: pre" value="R1:" />
<p:commandLink style="color: #1484e6" action="#{coverPageProcess.newReg}" update="currentRegisterValue,regName" value="#{postProcessedDump.getRegisterData().regValues[1]}">
<f:setPropertyActionListener target="#{registerData.selectedRegister}" value="R1" />
</p:commandLink>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</ui:composition>

Answer 1

I removed the white-space: pre; property from the css, and it works well now.