Workaround for Line Breaks in Lesson Titles

So, like many other people, I've been struggling for a long time getting line breaks in lesson titles.  We all know the <br> tag and /n just don't work, and that it impacts the side menu etc as well.

To fix many of the styling preferences we have, I have resorted to updating the code in the index.html file after publication, just using notepad.  I do this to put full screen backgrounds on microlearning slides (over multiple blocks), add logos etc. 

And today, finally, I have sorted the line break issue.

Originally, I updated the index.html file of my microlearning module to look for a colon in the title, and manually split it onto 2 lines, after load.  However, not all my courses have a colon in the title.  So, I've adjusted that to be based on the number of words I want on the first line - in the example below it's 3 words, but you can change it to any number you want.  

The instructions are below.  I hope it works for those of you that have had similar issues!

 

Visually Splitting the Course Title in Rise Exports

Modify the index.html file in a Rise or MicroLearning course export to split a long course title onto two lines.

 

✅ When to Use This:

• You want to visually break a long title in the Rise course interface.
• Works for Rise SCORM packages, MicroLearning exports, and standalone HTML files.

 

✅ Step-by-Step Instructions

1. Unzip your Rise export
• Locate the index.html file in the root folder of the course.
2. Open index.html in a text editor
• Use something like VS Code, Sublime Text, or Notepad++.  (I use notepad!)
3. Scroll to just before the closing </body> tag
• This is typically near the bottom of the file.
4. Paste the following script just before </body>:

<script>
(function waitForHeader() {
  const heading = document.querySelector('h1');

  if (heading && heading.innerText.trim().split(/\s+/).length > 3) {
    const words = heading.innerText.trim().split(/\s+/);
    const newContent = words.slice(0, 3).join(' ') + '<br>' + words.slice(3).join(' ');
    heading.innerHTML = newContent;
  } else {
    setTimeout(waitForHeader, 300);
  }
})();

</script>

 

1. Save the file
2. Re-zip the course (if needed)
• Select all files in the root folder (not the folder itself) and zip them again.
3. Upload to your LMS or launch locally to test.

 

ℹ️ Notes:

• The script waits for the DOM to load fully, then targets the first <h1> element.
• It splits the title after the first 3 words.
• You can adjust the 3 to another number in this line:

const newContent = words.slice(0, 3).join(' ') + '<br>' + words.slice(3).join(' ');

 

✅ Works With:

• Standard Rise SCORM exports
• MicroLearning exports
• LMS-hosted or local launches

 

For best results, test after applying the change to ensure the heading is present and rendered in a visible <h1> tag.