Control the Linebreaks in RadEditor

Environment

Product

RadEditor for ASP.NET AJAX

Description

When I load content with more than 80 characters, it will break and continue in another row without any issue. But when I load content with special characters like tilde (~), it breaks with half row. If I remove the tilde(~) and replace it with a dash (-) or some other special character, it works fine.

Solution

The observed behavior is due to how the browser (Chrome, Edge Chromium and IE) renders the provided content - the same rendering can be seen in a standard editable div element:

<div contenteditable="true" style="border: 1px solid red;width:800px;height:500px;word-wrap:break-word;">
               <span style="background-color: white; font-family: Arial, sans-serif; font-size: 13.5pt;">Filename: testtesttesttesttestesttesttesst~test_v4~2019-11-26-11-12-04UTC~testtesttesttesttestesttesttessttesttesttesttesttestesttesttessttesttesttesttesttestesttesttesst</span>
</div>

The solution is to apply the line-break:anywhere; CSS style:

<div contenteditable="true" style="line-break:anywhere;border: 1px solid red;width:800px;height:500px;word-wrap:break-word;">
               <span style="background-color: white; font-family: Arial, sans-serif; font-size: 13.5pt;">Filename: testtesttesttesttestesttesttesst~test_v4~2019-11-26-11-12-04UTC~testtesttesttesttestesttesttessttesttesttesttesttestesttesttessttesttesttesttesttestesttesttesst</span>
</div>

To apply the line-break: anywhere; style to RadEditor, create a EditorContentArea.css file with the following body rule:

body {
    line-break: anywhere;
}

and load the CSS file in RadEditor's content area:

<telerik:RadEditor runat="server" ContentAreaCssFile="~/EditorContentArea.css"></telerik:RadEditor>