So I have this list and in here employees need to select a specialty.  They may have multiple ones so i created a choice field and selected the option for Allow multiple selections.  I then have a workflow set up to export this data into a text field since you cannot create a calculated column from data in a choice field.  What i want to do is between each choice selected in this text field, i want there to be a break point instead of all the choices on a single line.  I did get this to work using this calculated formula. 

="<div style=text-align:left>"&"<img src=/_layouts/images/blank.gif onload=""{"&"var choices='"&Spec_3&"';"&"this.parentNode.innerHTML=choices.replace(/;#/g,'<br>');"&"}""></div>"

Spec_3 is the name of the text field that the choice column exports the data to.  Now the issue is that this just displays the HTML when i click on a single item or when i display this list on a web page.  I tried using a javascript render code below which to no avail isnt helping me render the column.   Is there another calculated column formula i could use to insert a break point? Thanks for any help. 

<script type="text/javascript">
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < theTDs.length) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < theTBODYTDs.length) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>

I was trying to do something similar, creating HTML in a calculated field (an image with a link). I found another trick - in the calculated field definition, don't return it as a string - return it as a number. That seems to 'confuse' the browser and it will treat the code as something to do. It will display correctly in views.

However, the standard forms won't display it properly. To make it work on the Display form, I had to do this (I add a CEWP to the forms, with reference to a JQuery library.

// These calculated values are links, but SharePoint thinks they should be
// brought back as numbers because of the definition of the field. This allows us to show the image with a link
// to a second image in the views, but these forms need the anchor text
// to be actually shown. Simple, grab the text, then display the text in a div and set the html of the td.
 
// Get what SharePoint gives
var testCalc = $("h3:contains('Your Calculated Field Display Name')").parents('tr:first').find('td').eq(1).text();

// And put it back in the same place
$("h3:contains('Your Calculated Field Display Name')").parents('tr:first').find('td').eq(1).html('<div>' + testCalc + '</div>');
 

Don't know if this applies to your situation...