I have the following code which I'm trying to test on how to use pre format on my site. After including the pre , the font changes and the lines does not break to fit on the 200px division . I want to maintain the default font size, style and family.
NB: I don't want to use overflow method .
I would like to have an output like this
"Sometimes it is very hard to code but by
circumstance you find yourself struggling
to fit in the game .
Awesome feelings come and disappear.
Niggas say this game is for the patient hearts.
You nigga is this true??
Nigga love style
keep in touch with us at any given time"
plus the default text font
<html>
<head>
<title>Test</title>
<style>
{
pre{
font-family: monospace;
text-wrap: unrestricted;
}
}
</style>
</head>
<body>
<div style='width:200px;'>
<pre>Sometimes it is very hard to code but by circumstance you find yourself struggling to fit in the game .Awesome feelings come and disappear.Niggas say this game is for the patient hesrts .. You nigga is this true??
Nigga love style
keep in touch with us at any given time</pre>
</body>
</html>
please help me solve this problem
Would this solution fit your need? <div style="white-space: pre-wrap;">content</div>
I've seen that here link
Remove the <pre> element and just add the style to the CSS as follows:
<div style='width:200px; white-space: pre-wrap;'>
Your text here
</div>
Related
In my web app, I want to highlight a piece of text so that it looks like somebody has painted it with a certain color. The Medium app uses this effect, too.
(I would like to show an image of this effect here, but stackoverflow does not allow me to post it because I do not have enough reputation points, yet.)
What kind of CSS and/or HTML markup do I need to achieve this?
As a side note: My app is written with React.
You need to use the semantic <mark> tag for this:
<p>This is some <mark>marked text</mark>.</p>
You can then style it any way you want using CSS:
mark {
background-color: HotPink;
}
<p>This is additional <mark>marked text</mark>.</p>
There are many ways to do it:
Highlight using the HTML <mark> tag
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Highlight text with only HTML code
<span style="background-color: #FFFF00">Yellow text.</span>
Highlight text with CSS & HTML
body { background-color:green; }
.highlight { background-color:#FFFF00; }
p { background-color:#FFFFFF;
<span class="highlight">Highlighted Text</span>
it doesn't matter if the application is written in React on any other framework. You can always define a CSS for basic html tag, such as as #Salaman suggested.
You can use the example that #Salman provided, but I would suggest a small modification.
mark.hotPink {
background-color: HotPink;
}
<p>Do not forget to check out our <mark class="hotPink">hot new offer</mark> today.</p>
<p>Also, you can check out our <mark>standard offers as well</mark>.</p>
You can write a CSS for tag but you probably don't want to do it for every mark tag (because you don't know if some other part of the system might be affected by this. The best (and the safest) way to do this is to create a custom class (i.e. class="hotPink" and assign it to your mark.
Hope this helps, all best! :)
How do i insert a line break in a single paragraph, without a <br> tag ? see below:
You can just press enter inside of a <pre>tag</pre> using HTML.
In CSS you can use white-space:pre or white-space:pre-wrap
In programming you use a newline \n
JS Bin Example: http://jsbin.com/simeri/edit?html,output
<p style='white-space:pre-wrap;text-align:center;font:bold 130% sans-serif'>
Google Fonts. Hundreds of free, open-source fonts optimized for the web...
Search or browse hundreds of font families, then add the ones you like to your ..
</p>
you can use css word-wrap property like below:
width: 200px; /*width of area after you want line break*/
word-wrap: break-word; /*break down the paragraph/text*/
or use \n dynamically into your code.
<!DOCTYPE html><html><body>
<p style=' white-space: pre-line;text-align:center;font:bold 100% sans-serif'>
Google Fonts. Hundreds of free, open-source fonts optimized for the web...
Search or browse hundreds of font families, then add the ones you like to your ..
</p>
</body></html>
Can you use  ..?
<p> </p>
This is what works within Canvas LMS...
I have a piece of text that I am trying to change the font color for on my site. The code is showing up correctly and I have read some other forums and tried to modify the code myself using HTML font color and PHP style but I can't seem to get it to work.
I am not a programmer myself, so I am most likely making some kind of rookie mistake. The code currently installed on the site is below:
<div style='text-align:center'>
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
I actually do not care if it is center aligned or not if I can get it to show up in white font, but I can't seem to be able to get it to show in white font.
When the sample code loads it brings back certain text that displays on the front of my my site. Can someone please tell me how to format this code properly to get it to show in a color of font of my choice? Your help would be greatly appreciated. Thanks!
All you need to do is a add a color declaration:
<div style='text-align:center; color: #FFFFFF;'>
Keep in mind that any inline style tags may overwrite the parent's style properties.
Try this code.
<div class="code">
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
<style>
.code, .code *
{
color: #FFFFFF!important;
}
</style>
Okay, let me introduce the problem:
I'm trying to style prices to be displayed similar to this example: $XXxx. I'm trying to use inline styles only to make it usable in HTML emails.
This is what I try to achieve:
Option 2 is what I really want, but if it isn't possible I'll go with Option 1
I've accomplished it with this code, but now is there a way to make the code "better"?
<div style="width:69px; font-family:'Arial Black', Gadget, sans-serif; font-size:34px; text-align:left; float:left;">
$99
</div>
<div style="padding:8px;">.99<br />
<font style="line-height:70%;">cwt</font></div>
I am assuming you are wanting an HTML example of this. You can use superscript in addition to a smaller font size for the "change" portion of the cost. for example:
$XX<span style="vertical-align:super;font-size:xx-small">.XX</span>
This is a quick way to get results similar to your Option 1 example
I know that when i come to HTML email i have to use the Table Layouts. This is what i have done here Unfortunately when i make some tests with this online tool to my Hotmail and gmail, the layout is not exactly the same. In the email the difference from my HTML code is that it does not get the same H2 font style and family in the text <h2>"Responda correctamente a las preguntas y gane un viaje a Roma!"</h2> and the second image is separated from the one on the top and the one on the bottom. What's the best solution to figure it out the issue? How can i achieve the same layout?
Thanks for your time
Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets. That said you can include a few embedded CSS statements (such as link color) as long as you're ok with them not rendering in some email clients.
Taste this post: http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters
Try to add style="display:block;" to all your img tags and instead of an h2 use a font tag with a style attribute:
<font style="color:#202020; font-family: 'Georgia',serif; font-size: 14px; line-height: 20px;">
<b>Some title</b>
</font>
<br>