We Keep Coding

Avoid linebreaks in dynamic text except after a certain character (jQuery)

I have given text strings which are displayed in containers of varying width. I want to allow linebreaks only after the character "·", which occurs two or three times in each of those text strings.
What I came up with (see below): With jQuery, I wrapped a span around the whole string with a css class that applies white-space: nowrap; to the string, and additionally I added a <br> tag after each "·", both using a replaceAll function: Now line breaks can only happen at the position of the inserted <br> tags.
My problem: This forces line breaks at all <br> tags. But if part one and two of the text string (i.e. the text up to the second "·" character) would fit into the parent container next to each other, I would like the line break only to happen after the second "·"!
var mytext = $('#wrapper2 .string1').text();
var search = " ·";
$('#wrapper2 .string1').each( function(index, element) {
$(element).html( $(element).html().replaceAll(mytext, '<span class="inner_wrapper">' + mytext + '</span>') );
$(element).html( $(element).html().replaceAll(search, search + '<br>') );
})
.wrapper1 {
width: 400px;
border: 1px solid #aaa;
padding: 0.5em;
font-size: 18px;
text-align: center;
}
#wrapper2 .inner_wrapper {
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>The original text</h3>
<div id="wrapper1" class="wrapper1">
<p class="string1">The title of the event · day, month and year · at the end the location</p>
</div>
<p>The width of the above box can change. What I want: Linebreaks should only occur <b>after the "·" characters</b>.</p>
<h3>The text processed by jQuery</h3>
<div id="wrapper2" class="wrapper1">
<p class="string1">The title of the event · day, month and year · at the end the location</p>
</div>
<p>This comes close, but if there is enough space (as in the boxes above), the first linebreak should occur after the <b>second</b> "·" character, not after <em>all</em> of them.</p>

You could use the <wbr /> tag to add a word break only when needed, but unfortunately this does not work with a white-space: nowrap; style. The trick is to remove that style, replace all spaces with (non-braking space) entity, and restore spaces (or <wbr /> tags) where needed:
var $el = $('#wrapper2 .string1');
var html = $el.text()
.replace(/ /g, ' ')
.replace(/( ·)/g, '$1 '); // or replace with '$1<wbr />'
$el.html(html);
.wrapper1 {
width: 400px;
border: 1px solid #aaa;
margin: 3px 0;
padding: 0 0.5em;
font-size: 18px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>The original text</b>
<div id="wrapper1" class="wrapper1">
<p class="string1">The title of the event · day, month and year · at the end the location</p>
</div>
<b>The text processed by jQuery</b>
<div id="wrapper2" class="wrapper1">
<p class="string1">The title of the event · day, month and year · at the end the location</p>
</div>

To complete this question/answer set for anyone who's interested, here's the solution I came up with myself after reading #Nikkorian's comment concerning split() and wrapping the split substrings in <span> tags, to which I apply white-space: nowrap via CSS to avoid linebreaks inside them:
I split the text string using split('·') (var "parts", which is an array), looped through that array until the next-to-last part adding span tags around it and a · before span's end tag, then added the last part, also with a span tag around it, but without the · at the end.
$('#wrapper2 .string1').each( function(index, element) {
var parts = $(element).text().split(' · ');
var editedContent = '';
for(var i=0; i < parts.length - 1; i++) {
editedContent += '<span>' + parts[i] + ' ·</span> ';
}
editedContent += '<span>' + parts[i] + '</span>';
$(element).html(editedContent);
});
.wrapper1 {
width: 400px;
border: 1px solid #aaa;
padding: 0.5em;
font-size: 18px;
text-align: center;
}
#wrapper2 > .string1 > span {
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>The original text</h3>
<div id="wrapper1" class="wrapper1">
<p class="string1">The title of the event · day, month and year · at the end the location</p>
</div>
<p>The width of the above box can change. What I want: Linebreaks should only occur <b>after the "·" characters</b>.</p>
<h3>The text processed with javascript/jQuery</h3>
<div id="wrapper2" class="wrapper1">
<p class="string1">The title of the event · day, month and year · at the end the location</p>
</div>
<p>This is the desired result: linebreaks can only occur after the "·" characters which appear between the substrings, but if the container is wide enough, two or more substrings can appear in the first line.</p>

how to Styling for printing in JavaScript

to print the contract, I want to do some parts of the table in the middle of the line and look like what you see in the picture
I did them correctly in View, but in JavaScript I want them to look like View in print.
If I put text-align: center in the style, the whole form will be centered, which I do not want. Please help
<div class="row justify-content-around">
<b id="d2"> امضاء و اثر انگشت کارگر</b>
<b id="d1">امضاء و مهر کارفرما</b>
</div>
<script>
function printDiv() {
var divToPrint = document.querySelectorAll('.print-table');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'font-family:vazir;' +
'border:1px solid #000;' +
'padding:0.5em;' +
'}' +
'</style>';
divToPrint.forEach((item) => {
htmlToPrint += item.outerHTML;
})
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
</script>

Try my style below:
<div style="width:500px;overflow: hidden;" class="row justify-content-around">
<b style="width: 50%;display: inline-block;float: left;text-align: center;" id="d2">aaaaaaa</b>
<b style="width: 50%;display: inline-block;float: left;text-align: center;"id="d1">bbbbbbb</b>
</div>
We need to make to be display as inline block, so that we can set the width attribute for it, here's 50%, but after setting it as inline-block, will become a block element that it will display each in one line, so here we need to add float attribute so that they will display in one line, then add overflow hidden in the parent div. Pls note here, the div need to identify a width and I set 500px for test here.
Solution 2 is, not a good solution, just append &nbsp behind like : $('#d2').append(" ");

Styling jQuery script output

So here’s the code
<script>
function get_price(){
var price_margin = 0.00174;
jQuery.get("https://min- api.cryptocompare.com/data/price? fsym=XRP&tsyms=USD").then(function(data){
jQuery('#xrp_price').text(function(price){
return "PRICE " + data["USD"].toFixed(5);
});
.......
That returns a value 0.45678 for e.g but I’d like to make the last 3 digits really small so just the 0.45 stands out.
I have tried changing the .text to .html and adding or but that just makes the whole value bold and not the last 3 digits. Hmmmmmm (scratches chin).
All help is greatly appreciated

Instead set .text set .html
and set the 3 first chars in span with class='bold'
and the other chars get by use data.toFixed(5).slice(3) and set another class='small'
then style in css according classes in html
var data=0.45678 ;
$('#xrp_price').html(function(price){
return "PRICE <span class='bold'>" + data.toFixed(2) + "</span> <span class='small'>"+ data.toFixed(5).slice(3) + "</span>";
});
.bold{
font-weight: bold;
}
.small{
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xrp_price"></div>
EDIT:
You can use <small> DOM instead <span class='small'>

Adding a newline character and display input from a textarea

I have a text are in a form. I used this code
$('textarea').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
var s = $(this).val();
$(this).val(s + "<br />");
}
});
to allow users to go the next line using the enter button. I tried using both and \n
In the form, the user is able to go to a new line. However, when the input is displayed on a page, the new line doesn't show, and any text after the new line does not appear. However, it is still there- if you go to edit the form it stills shows the text typed after you click enter. I added
white-space: pre-wrap;
into the css for text boxes in my css file trying to resolve the issue. However, it still did not work. Any suggestions/ input on how to resolve this?

You don't want to insert the <br/> tag as they type. You really don't want to do anything to their text as they type. If you want to maintain their line breaks, you can convert them to <br/> tags before you inject them into an element.
$('#text').keyup(function(event) {
var text = $("#text").val();
text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
$("#result").html(text);
});
textarea {
min-width: 200px;
min-height: 200px;
float: left;
}
#result {
float: left;
border: 1px solid red;
padding: 10px;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="text" placeholder="Type in here"></textarea>
<div id="result"></div>

append strange behaviour

I have some application that adds elements to contentEditable div.
Something like this:
<div id="div" contentEditable="true"></div>
<button id='appendBtn'>append</button>
<style>
.bracket {
color: blue;
}
.template-content {
color: green;
}
#div {
border: solid 1px gray;
margin-bottom: 10px;
}
</style>
<script>
function appendContent() {
var content = "<span class='template-block'>" +
"<span class='bracket'>{</span>" +
"<span class='template-content'>param</span>" +
"<span class='bracket'>}</span>" +
"</span>";
$("#div").append(content);
}
document.getElementById ("appendBtn").addEventListener ("click", appendContent, false);
</script>
I wrote a working example in jsfiddle.
The problem is that when I click append and continue typing after added element all next text comes green. It happens because all next text pasts into last span tag (of class bracket with green color)...
<span class="bracket">}some text</span>
The solution is adding a after last closing span tag. Like this:
var content = "<span class='template-block'>" +
"<span class='bracket'>{</span>" +
"<span class='template-content'>param</span>" +
"<span class='bracket'>}</span>" +
"</span> ";
But it brings a lot of unwanted staff I have to do with the text after. How can I solve this?

Thats a default behaviour of content editable setting the pointer behind the last character inside. In Your case the pointer is set
<span class='bracket'>}--> pointer <--</span>
You could try a workaround with ​ entity (zero width space)
if you dont want the