<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebOasis - Add Line Breaks</title>
<meta name="description" content="Split a block of text into multiple lines by adding line breaks. You can add a new line after an occurence of a letter/word or after certain amount of characters.">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<style>
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
src: local('Roboto Light'), local('Roboto-Light'),
url('fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
url('fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url('fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
src: local('Roboto Medium'), local('Roboto-Medium'),
url('fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
url('fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
</style>
</head>
<body>
<section class="navbar">
<div class="nav-wrap">
<ul>
<li><a href="#" id="app_menu" class="tooltipped tooltipped-s" aria-label="Menu"><i class="i-menu font-24"></i></a></li>
</ul>
<a href="index.html" class="brand"><h1><b>WebOasis Text</b></h1></a>
<ul class="right"><a href="https://weboas.is" class="brand"><h1><b>WebOasis Homepage</b></h1></a></ul>
</div>
</section>
<div class="mask"></div>
<nav id="nav-menu" class="clear">
<ul class="accordion">
<li class="title">WebOasis</li>
<li><a href="index.html">Home</a></li>
<li>
<a href="#">Basic Tools</a>
<ul>
<li><a href="sort-text.html"><i class="i-sort"></i>Sort Text</a></li>
<li><a href="convert-case.html"><i class="i-case"></i>Convert Case</a></li>
<li><a href="find-and-replace.html"><i class="i-find_replace"></i>Find & Replace</a></li>
<li><a href="reverse-list.html"><i class="i-reverse_list"></i>Reverse List</a></li>
<li><a href="difference-checker.html"><i class="i-compare"></i>Difference Checker</a></li>
<li><a href="word-count.html"><i class="i-word_count"></i>Word Count</a></li>
</ul>
</li>
<li>
<a href="#">Text Manipulation</a>
<ul>
<li><a href="add-prefix-suffix.html"><i class="i-prefix"></i>Add Prefix & Suffix</a></li>
<li><a href="add-line-breaks.html"><i class="i-linebreak"></i>Add Line Breaks</a></li>
<li><a href="remove-line-breaks.html"><i class="i-remove"></i>Remove Line Breaks</a></li>
<li><a href="concatenate-text.html"><i class="i-combine"></i>Concatenate Text</a></li>
<li><a href="split-text.html"><i class="i-split i-rotate-90"></i>Split Text</a></li>
<li><a href="extract-column.html"><i class="i-column"></i>Extract Column</a></li>
<li><a href="swap-columns.html"><i class="i-swap"></i>Swap Columns</a></li>
</ul>
</li>
<li>
<a href="#">Clean Text</a>
<ul>
<li><a href="remove-spaces.html"><i class="i-extra_space"></i>Remove Spaces</a></li>
<li><a href="remove-duplicate-lines.html"><i class="i-format"></i>Remove Duplicate Lines</a></li>
<li><a href="remove-empty-lines.html"><i class="i-line_space"></i>Remove Empty Lines</a></li>
<li><a href="remove-diacritics.html"><i class="i-remove"></i>Remove Diacritics</a></li>
<li><a href="remove-unwanted-characters.html"><i class="i-chars"></i>Remove Unwanted Characters</a></li>
<li><a href="strip-html-tags.html"><i class="i-code"></i>Strip HTML Tags</a></li>
</ul>
</li>
<li>
<a href="#">Formatting</a>
<ul>
<li><a href="add-line-numbers.html"><i class="i-line_numbers"></i>Add Line Numbers</a></li>
<li><a href="add-commas-to-numbers.html"><i class="i-abc i-commafy">1,234</i>Add Commas to Numbers</a></li>
<li><a href="replace-smart-straight-quotes.html"><i class="i-quote"></i>Replace Smart/Straight Quotes</a></li>
<li><a href="tabs-to-spaces.html"><i class="i-tab"></i>Tabs to Spaces</a></li>
<li><a href="spaces-to-tabs.html"><i class="i-space"></i>Spaces to Tabs</a></li>
<li><a href="pad-text.html"><i class="i-pad"></i>Pad Text</a></li>
<li><a href="word-wrap.html"><i class="i-wrap"></i>Word Wrap</a></li>
<li><a href="justify-text.html"><i class="i-justify"></i>Justify Text</a></li>
<li><a href="center-text.html"><i class="i-center"></i>Center Text</a></li>
</ul>
</li>
<li>
<a href="#">Transform Text</a>
<ul>
<li><a href="reverse-letters.html"><i class="i-abc i-revtext">cba</i>Reverse Letters</a></li>
<li><a href="reverse-words.html"><i class="i-swap"></i>Reverse Words</a></li>
<li><a href="upside-down-text.html"><i class="i-abc i-flip i-rotate-180">abc</i>Upside Down Text</a></li>
</ul>
</li>
<li>
<a href="#">Generators</a>
<ul>
<li><a href="password-generator.html"><i class="i-lock"></i>Password Generator</a></li>
<li><a href="filler-text.html"><i class="i-format"></i>Filler Text</a></li>
</ul>
</li>
<li>
<a href="#">More Tools</a>
<ul>
<li><a href="notepad"><i class="i-notepad"></i>Online Notepad</a></li>
<li><a href="cleaner"><i class="i-notepad"></i>Text Cleaner</a></li>
<li><a href="base64"><i class="i-notepad"></i>Base64</a></li>
<li><a href="url"><i class="i-notepad"></i>URL</a></li>
</ul>
</li>
</ul>
</nav>
<main class="wrapper padding-y">
<div class="widget w-100">
<header class="widget-header">
<h1>Add Line Breaks</h1>
</header>
<hr>
<div class="widget-body">
<div class="clear spacer-s">
<div class="left hidden-xs-down">
<div class="dropdown">
<button type="button" class="btn btn-sm dropdown-trigger">File</button>
<div class="dropdown-menu">
<a href="#" id="file_new"><i class="i-file"></i> New</a>
<span class="file-button">
<input type="file" id="file_upload" accept=".txt">
<label for="file_upload"><i class="i-folder"></i> Open...</label>
</span>
<a id="file_download"><i class="i-save"></i> Save As...</a>
<hr>
<a href="#" id="file_print"><i class="i-print"></i> Print</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-sm dropdown-trigger">Edit</button>
<div class="dropdown-menu">
<a href="#" id="edit_undo"><i class="i-undo"></i> Undo</a>
<a href="#" id="edit_redo"><i class="i-redo"></i> Redo</a>
<hr>
<a href="#" id="edit_copy"><i class="i-copy"></i> Copy</a>
<a href="#" id="edit_delete"><i class="i-close"></i> Delete</a>
<a href="#" id="edit_select"><i class="i-select_all"></i> Select All</a>
</div>
</div>
</div>
<div class="right xs-100 xs-spacer-n xs-spacer-s">
<select id="settings" class="input-sm xs-100">
<option value="1">Text occurence</option>
<option value="2">Character position</option>
<option value="3">Add 1 line</option>
</select>
</div>
</div>
<div class="w-100 clear text-occurence xs-spacer-n">
<div class="form-group left spacer-r xs-100">
<label>Add line breaks</label>
<select id="before_after" class="input-sm xs-right" style="width:120px">
<option value="before">before</option>
<option value="instead">instead of</option>
<option value="after" selected>after</option>
</select>
</div>
<div class="form-group left xs-100 xs-spacer-n">
<label>this text</label>
<input id="text_occ" type="text" value="C" class="input-sm xs-right" style="width:120px">
</div>
</div>
<div class="w-100 clear character-number none xs-spacer-n">
<div class="form-group left spacer-r">
<label>Add line breaks every</label>
<input id="char_num" type="number" value="1" class="input-sm" style="width:50px">
<label>character/s.</label>
</div>
</div>
<style>
#input_output{height:522px}
@media (max-width: 768px){
#input_output{height:400px}
}
@media (max-width: 414px){
#input_output{height:514px}
}
@media (max-width: 412px){
#input_output{height:509px}
}
@media (max-width: 384px){
#input_output{height:418px}
}
@media (max-width: 375px){
#input_output{height:445px}
}
@media (max-width: 360px){
#input_output{height:418px}
}
@media (max-width: 320px){
#input_output{height:346px}
}
</style>
<div id="main">
<textarea id="input_output" style="height:479px"></textarea>
<div class="clipboard"><span class="tooltipped tooltipped-n" aria-label="Click to copy"><i class="i-copy" ></i></span></div>
</div>
<div class="clear">
<div class="right xs-100 xs-left">
<button id="addLineBreaks" type="button" class="btn btn-sm xs-50 xs-left"> Apply</button>
<button id="clearAll" type="button" class="btn btn-sm btn-light xs-50 xs-left"> Clear</button>
</div>
</div>
</div>
</div>
<div class="clear w-100 margin-y">
<article class="widget wm-100 center box-content">
<header class="widget-header">
<h4>About</h4>
</header>
<hr>
<p>This text tool allows you to split a block of text into multiple lines by adding line breaks. You can add a new line after an occurence of a letter/word or after certain amount of characters. You can also double the amount line breaks by selecting the "Add 1 line" option.</p>
<header class="widget-header">
<h4>Text Occurence</h4>
</header>
<hr>
<p>Use this option to add a line break before or after certain characters. You can choose "instead of" to replace the specified character with a new line.</p>
Example: Add line breaks after each occurence of letter "C".
<pre>ABCABCABC</pre>
Result
<pre>ABC
ABC
ABC</pre>
<header class="widget-header">
<h4>Character Position</h4>
</header>
<hr>
<p>Use this option to add a line break after reaching a certain amount of character.</p>
Example: Add line breaks every 4 characters.
<pre>ABCABCABC</pre>
Result
<pre>ABCA
BCAB
C</pre>
<header class="widget-header">
<h4>Add 1 Line</h4>
</header>
<hr>
<p>Use this option to add a new line after the last occurence of linebreak (followed by any character except \n).</p>
Example: Add new line
<pre>ABC
ABC
ABC</pre>
Result
<pre>ABC
ABC
ABC</pre>
<header class="widget-header">
<h4>Related Tools</h4>
</header>
<hr>
<ul>
<li><a href="remove-line-breaks.html"><strong>Remove Line Breaks</strong></a> - Remove all line breaks in a text or replace it with a different character.</li>
</ul>
</article>
</div>
<div class="toast" role="alert"><div class="toast-content"></div></div>
</main>
<br>
<footer class="clear font-14">
<div class="wrapper">
<div class="center">© WebOasis - Text</div>
</div>
</footer>
<script src="js/site.js"></script>
<script src="js/add-line-breaks.js"></script>
<script>
$('body').ready(function() {
$('.accordion > li:eq(3) > a').addClass('active').next().show();
});
</script>
</body>
</html>