Pre-formatted HTML containing unwanted line-break - html

I am trying to create a pre-formatted block of text using the pre element where there are sometimes a few blank lines in between the content. The problem is that occasionally the text breaks onto a separate line after either a forward slash(/) or colon(:)
An example is as follows:
<pre>Lorem ipsum dolor sitat: http://wwww.site.com/foo/bar</pre>
Displays as:
Lorem ipsum dolor sitat: http://wwww.site.com/foo
/bar
Does anyone know how to resolve this?

I'm with #Kyle, without seeing the page itself I think that it is too long for the container that you have it in, so maybe make the text smaller or widen the container and see if that helps.
I tried:
<html>
<pre>Lorem ipsum dolor sitat: http://wwww.site.com/foo/bar</pre>
</html>
and didn't get any line breaks.

Related

How to get lorem ipsum to instantiate on multiple lines instead of 1 in VS Code?

In VS Code if I type "lorem" and then press enter it will generate a paragraph of lorem ipsum. The only problem is that the paragraph comes out as one very long line of text as opposed to several lines in the text editor. Is there a setting I can change so that it automatically generates my lorem ipsum on multiple lines?
I think you have to put each lorem call into its own element, like p*4>lorem10.
lorem10 would be 10 words of lorem.
Go to settings and type in "word wrap". Change "Editor: Word Wrap" from "off" to "bounded". This does exactly what I was wanting in the first place.
You can write lorem20*5 and press the tab
20 = number of words
5 = number of lines
This will generate 20 random words in 5 lines in VSCode.
You just need to write lorem and the add the amount of words you would like it to add next to it like so:
//up to 10 words:
lorem10
//up to "n" words:
lorem"n"
as a result you would get:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, odio!

Is there a quick way to add tags arround text in html

Say I have some text
"Lorem ipsum dolor sit amet,"
and I want to quickly add tags around "dolor sit". I am aware that I can type bold and press tab but then both tags will appear before the "dolor sit"
"Lorem ipsum <bold></bold>dolor sit amet,"
Is there any shortcut to just add the bold tags directly around the text? (I'm using also emmet)
Try to use Wrap With Abbreviation action: https://docs.emmet.io/actions/wrap-with-abbreviation/

Make a jump line in wordpress

Okey, this is the code i have:
[lazy_load_box effect="slidefromright" speed="550" delay="80"]
[hero_unit text="Progressive business thinking
Lorem ipsum dolor sit amet, conse ctetur" btn_text="soporte 24/7 <br> 123456" btn_link="http://localhost/wordpress/donec-porta-diam-eu-massa/aliquam-erat-volutpat/" btn_style="primary" btn_size="normal" target="_self"]
[/lazy_load_box]
This is part of a code from a wordpress template, i tried to make a jump line here:
btn_text="soporte 24/7 <br> 123456"
But it doesn´t work it just write in the page:
SOPORTE 24/7 <BR> 123456
I hope someone know about this. I'm new working with templates.
Thanks for your time.
Because this line isn't supporting html codes. You should find the html source of this line. So, you can add the br tag after find it.

trouble placing images in articles using css

so im learning HTML and CSS and i have a question
im trying to put an image in an article and make it so the text that is also in the article will not write overtop of or get in the way of the image, but everything ive tried so far isnt working properly.
i was using W3Schools.com to learn how to do it.
here is they're isntructions on doing it
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position
and here is an example of what im trying to do http://www.spacenews.com/article/launch-report/37302australian-led-scramjet-test-ends-in-failure
even with the instruction on the website i cant get it to work properly, could they possibly be the wrong instructions?
im using coffeecupfree HTML editor and loading the site up on chrome.
You can do this with simple HTML:
<img align="right" src="http://www.spacenews.com/sites/spacenews.com/files/styles/large/public/images/articles/Scramspace_4x3.jpg?itok=7JbqmW0r">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet </p>
When you see something on a site and you'd like to learn how they did it, I'd suggest viewing the source or right-clicking the element you're interested in in Chrome and selecting "Inspect Element".
JSFiddle example
To achieve what you're trying to do, you can also use float: right in your image. It will make the text surround your image.

tinymce valid_element not allowing all the html elements

I would like my tinymce editor to allow all the html elements, include some nested kind.
I read the documents at tinymce: http://www.tinymce.com/wiki.php/Configuration:valid_elements
And also confirmed by this post on Stackoverflow: TinyMce Allow all Html tag
I use valid_elements :"*[*]", in my tinymce options:
$('.page-tinymce-editor').tinymce({
theme: 'advanced',
theme_advanced_buttons1: "fontsizeselect,bold,italic,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink,code,image,uploadimage,uploadattachment",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
width : "660px",
height: "1200",
body_id :"article",
valid_elements :"*[*]",
skin: "wp_theme",
relative_urls: false,
content_css: "http://" + location.host + "/assets/screen.css",
plugins: 'uploadimage,uploadattachment'
})
But there's a nest condition in my html is still remove by tinymce. I have a piece of html like the following:
<span class="text">
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</span>
which becomes this :
<p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
Tinymce removes the span outside the p tag. Other span tag are all fine. I studied the tinymce over and over, but didn't come out any idea to fix this.
Is there way to fix it?
Thanks a lot
You will need to adjust the valid_children setting! I guess p-tags are not defined/allowed al child noddes of spans by default.
I think this could not be done on tinymce side. Here is the post talking about it at Tinymce forum: http://www.tinymce.com/forum/viewtopic.php?pid=98807#p98807
Try something like extended_valid_elements : '+span[p]', in addition to the valid_children setting discussed above. And make sure to clear your cache entirely to make sure its not serving your old config file.
This should allow p to be a child of span
More information on that topic:
Alan Storm on Magento TinyMCE
Pixafy - Overcoming Magento's TinyMCE
I know this is an old topic but it still ranks high in the search results so hopefully it will help someone.