How to use JavaScript to override text wrapping on Case Comments

Question

Salesforce doesn't support text wrapping when Case Comments have long strings of text. This means that the Case Page sometimes gets incredibly wide, which makes it difficult to edit / read.

Salesforce has a published workaround here using a bookmarklet: https://help.salesforce.com/articleView?id=000176537&language=en_US&type=1

This seems like a great opportunity to simply embed the JavaScript directly to the page via a Visualforce page, but I seem to be having trouble (I'm pretty new to JavaScript). Am I missing anything here? Is it even possible?

First try:

<apex:page standardController="Case">
    <script type="text/javascript">
        var sty = document.createElement('style');
        sty.innerHTML = "table.list{width:1200px;}td.dataCell{word-wrap:break-word;word-break:break-all;}";
        document.head.appendChild(sty);
    </script>
</apex:page>

Second try:

<apex:page standardController="Case">
    <script type="text/javascript">
        var css = "table.list{width:1200px;}td.dataCell{word-wrap:break-word;word-break:break-all;}",
        head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet){
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }
    </script>
</apex:page>

Any suggestions would be welcome!

Answer 1

You can't embed the script in the page, because it won't have access to the parent page (it's an iframe). However, you can use apex:detail, and just override the entire page:

<apex:page standardController="Case">
    <script type="text/javascript">
        var sty = document.createElement('style');
        sty.innerHTML = "table.list{width:1200px;}td.dataCell{word-wrap:break-word;word-break:break-all;}";
        document.head.appendChild(sty);
    </script>
    <apex:detail subject="{!Case}" />
</apex:page>