I am trying to add an empty line between two text spans
<span> The models have random values that I dont understand and it is not sufficenit but whatever </span>
{'\n'}
<span>Lots of text here </span>
The {'\n'} does not seem to work. What else can I try?
use <br/> tag for this purpose
<span> The models have random values that I dont understand and it is not
sufficenit but whatever </span>
<br />
<span>Lots of text here </span>
As ali said you can use <br>
Or instead you can put them into <p> tag because they are text ... span is not usually used on Lots of text
Code should be like this
<p> The models have random values that I dont understand and it is not sufficenit but whatever </p>
<p>Lots of text here </p>
Related
Solved:
This question is actually a combination of two individual questions:
how to generate an "article-like" passage when each sentence and each word is wrapped with a tag. This should work naturally with Bootstrap's grid and container system, only if the spans around words are spaced (using space or linebreak) with each other. In other words, according to: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#, the tag "is a generic inline container for phrasing content, which does not inherently represent anything" and two immediate adjacents s are considered as two different parts of a single word, i.e. doing is parsed as "doing" instead of "do" and "ing".
The tags in my project code are generated using v-for of the VUE3, which by default doesn't provide any word-spacing between two s. So according to Vuejs v-for on inline elements trims whitespace i added some additional space between two word s by cooperating and v-for. Especially i added a {{ ' ' }} spacing after each word . This semantically separates words and the line-wrapping takes place.
Original question:
i'm currently learning Bootstrap by implementing a personal project. There i need to display a passage, of whom each sentence belongs to a tag. And again for each sentence, each individual token belongs to its own tag. Namely something like:
<span>
<span> the </span> <span> first </span> <span>sentence</span> <span>.</span>
</span>
<span>
<span> the </span> <span> second </span> <span>sentence</span> <span>!</span>
</span>
Now i would like to display this passage as a "real" article, where each sentence is displayed inline after its predecessor, namely something like:
the first sentence . the
second sentence !
Notice that the second sentence starts right after the period of the first one, and is wrapped because of lack of space.
Now I've learned to set class='d-flex flex-sm-wrap' to each sentence to break each individual sentence to be like:
this is the first
sentence .
and here is the
second sentence !
Each individual sentence breaks, but they are not displayed inline.
Could you please provide a solution to fulfill the requirement?
Also is there an elegant way of gapping the words? Is class='pe-1' for each word the best solution?
Edit on 30.12.2021, attach with a minimal runnable HTML snippet as suggested by Chris G:
Edit again on 30.12.2021, notice that there is no space nor returns between two adjacent words. It works perfectly here in the embedded console but doesn't work stand-along: https://jsfiddle.net/hv8c6wpf/10/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class='container'>
<div class='row'>
<div class='col-sm-3'>
<span class="sentence d-flex flex-sm-wrap pe-1">
<span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span>
</span>
<span class="sentence d-flex flex-sm-wrap pe-1">
<span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span><span>word</span>
</span>
</div>
</div>
</div>
I don't think you need extra flex or anything, just wrapping each sentence with a span and each word with a span works fine.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="col-sm-3">
<span>
<span>This</span>
<span>is</span>
<span>the</span>
<span>first</span>
<span>sentence.</span>
</span>
<span>
<span>This</span>
<span>is</span>
<span>the</span>
<span>second</span>
<span>sentence.</span>
</span>
<span>
<span>This</span>
<span>is</span>
<span>the</span>
<span>third</span>
<span>sentence.</span>
</span>
<span>
<span>This</span>
<span>is</span>
<span>the</span>
<span>fourth</span>
<span>sentence.</span>
</span>
<span>
<span>This</span>
<span>is</span>
<span>the</span>
<span>fifth</span>
<span>sentence.</span>
</span>
<span>
<span>This</span>
<span>is</span>
<span>the</span>
<span>sixth</span>
<span>sentence.</span>
</span>
</div>
</div>
</body>
</html>
Every sentence wraps after the width of the col-sm-3 is wrapped. Is this what you want?
Have you tried the class d-inline? If I have understood you properly, then you are trying to implement word-wrap through bootstrap.
Anyways, you should definetly try adding classes via Chrome dev tools because it lists all the related bootstrap classes while also displaying how they change the page.
Use px-1 or mx-1 : for spacing words within a sentence.
I want to use javascript to change a word in a sentence. I can change the contents of tags easily enough but they always come with their innate behaviour. e.g. <b> makes text bold <p> moves down to a new line
etc.
What I want is to do something like this?
<text> Static part of sentence </text> <text id="placeholder"> Text to
ToUpdate </text>
I thought <plaintext> or <pre> might be the way to go but <plaintext> is depreciated and <pre> still starts the text on a new line.
You can use the span tag
document.getElementById("update").addEventListener("click", function(){
document.getElementById("placeholder").innerHTML = "I HAVE CHANGED!";
})
<span>Static part of sentence </span><span id="placeholder"> Text to ToUpdate</span>
<button id="update">Update the text</button>
The span tag allows you to group inline-elements in a document and it has no visual effects as described here or here.
When you press button it calls randomQuote() function using onClick method in html. It works fine , changes the background color and the text of quotes[rand] also works. But there is no change in by id element. Also, it is not a array problem because if i type the same by statement outside the randomQuote(), it works fine.
Here is the code:
function randomQuote(){
var rand =Math.floor(Math.random()*(quotes.length));
$("#qu").html(quotes[rand]);
$("#by").html(by[rand]);
$("body").animate({backgroundColor: colorr[rand]}, 1000);
};
(Go to https://codepen.io/TheCoder21/pen/XVVxvo) for full code
The issue in your markup:
<div class="quote">
<blockquote id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p id="by">
random text
</p>
</blockquote>
</div>
container with id="by" overwrites by this jquery method $("#qu").html(quotes[rand]);
If you want to prevent this behaviour just wrap your text in new paragraph with id="qu":
<blockquote>
<p id="by">
Here are some of my favourite quotes.Hope you enjoy them!
</p>
<p id="by">
random text
</p>
</blockquote>
The problem is that your by element belongs inside blockguote i.e id=qu element when you did $("#qu").html(quotes[rand]);
It's html structure got changes. you no longer have a by element.
Therefore, when you try to $("#by").html(by[rand]); nothing happens. Because no by element was found.
Solution: move your by element outside the blockquote
Working code: https://codepen.io/anon/pen/MrLodd
You have to separate the id in two paragraphs inside the blockquote. You can't give the blockquote and id and then expect the paragraph tag to also pick up an id inside of it. The blockquote overrides it.
<blockquote>
<p id="qu">
Here are some of my favourite quotes.Hope you enjoy them!
<p>
<p id="by">
random text
</p>
</blockquote>
I have different requirement for my webpage. For that I need to change the DOM elements. I will have the html from server through AJAX. Html is come from server for different pages is different. Like,
<h1> Some text </h1>
Text out of tags
<div>
<p> Text in div </p>
<img src="some-image.jpg" />
</div>
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
Something like that.
When it appears in webpage, It would be like,
Some text Text out of tags
Text in div An Image
Some other text
Some other text
Another Image
So, what I need is, I want to convert the above HTML DOM structure as follows by using Javascript or jQuery.
<p> Some text Text out of tags Text in div</p>
<img src="some-image.jpg" />
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
I just want text through <p> tags and images through <img> tags. I don't require remaining all other stuff.
If it is possible, please help me.
Any help would be appreciated.
You can use
$("<selector>").contents().unwrap();
with all the element you want to remove.
For example:
$(document).ready(function() {
$('h1, div, a').contents().unwrap();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> <h1> Some text </h1> </p>
<div> <img src="some-image.jpg" /> </div>
<p> Some other text </p>
<p> Some other text </p>
<img src="some-image.png" />
Similar to this question remove parent element but keep the child element using jquery in HTML
use replaceWith() and return the element you want
You can manipulate/edit the DOM structure received from the server. To hide certain <div> or <p> elements, try following :
document.getElementById("divWithImage").style.display = "none";
^^^^^^
Of course this will hide everything inside, so you should get hold of the inside contents like <img> and inject them again in the DOM at desired location.
I use ckeditor and I would like to wrap every line with span tag.
For example, when I enter text in the editor I get:
this is the first line
<br>
this is the second line of text
<br>
and the third one
I want it to be by default:
<span style="font-size:12px;">this is the first line</span>
<br>
<span style="font-size:12px;">this is the second line of text</span>
<br>
<span style="font-size:12px;">and the third one</span>
I know there is something called "dataProcessor" but I don't understand how to use it.
If it is possible to add this rule also to pasted text it will be even better.
Thanks!