I am create code css below.
I want to horizontal scroll but when sentence is too long it's not create scrolling but sentence break and show in next line.
In image i want aaaa.. should be printed in only one line and bbb.. in second line.but aaa... sentence come on second line without tag.
html code & CSS code
this div tag container width is 80% of the screen.
code {
margin: 10px 0;
padding: 10px;
text-align: left;
display: inline-block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
background: #FAFAFA;
border: 1px solid #f2f2f2;
border-left: 4px solid #6d7fcc;
color:#000;
}
<code> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</code>
Try using word break
word-break: normal;
After many try i get right answer..
white-space:nowrap;
This property remove white-space to add sentence to the new line.
Related
I have a CSS code that I use in my blogspot site to store all my code and technical snippets.
.code {
background:#dae6ef;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow-y: auto;
padding: 10px 5px 5px;
width: 90%;
}
.code:hover {
background-repeat:no-repeat;
}
If I go to my web page to select only all text inside the text box it will
select all text in the whole page.
Not like this
I wanted it to be selecting only what's inside the code box when I hit CTRL + a.
I want this
Is that possible in CSS? BTW I have no CSS background, I just got that code from the web.
Use input fields for your Text. by that pressing [CTRL] + [a] will only select the text inside the input. You can style input fields as you want so they can look like your text-
its very simple , just assign contenteditable="true" in your html div and thats it
also check the similar question in Edit contenteditable text with Ctrl-A (Select All) removing all child elements
I'm trying to get lines to surround an h1 but I'm having problems aligning the text with the surrounding lines. I've used embedded before / after attributes but I couldn't get them to work in Gmail so I opted of an inline attribute using borders on the h1. Currently the text "January 2018" is aligning below the surrounding lines. See code below.
h1 {
text-align: center;
color: #ffe800;
font-family: proxima-nova, sans-serif;
font-size: 22px;
font-weight: bold;
text-transform: uppercase;
}
<h1 style="border-left: 150px solid #ffffff; border-right: 150px solid #ffffff; height: 3px; display: block;">January 2018</h1>
Thanks!
I think you need to change your display property from display:block to display:inline
I'm working on my site and i want there to be an horizontal line by the right side of the page headers. Currently this is the code for my header, stripped css.
#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
letter-spacing: -2px;
/*text-transform: uppercase;
border-bottom:1px solid #15A2FF;*/
}
Alongside:
<div id="newhead"><?php the_title(); ?></div>
But for some reason i cant get the lines to show by the side of the header text.
Please help. http://jsbin.com/ILOlivI/1/edit
I think I would use a background-image in the header row that is overwritten by a background-color of the text. Something like this:
<div id="newHead"><div>the header text</div></span>
#newHead {
background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
}
#newHead div {
background-color: white;
display: inline-block;
padding-right: 10px;
}
Here's a jsfiddle example: http://jsfiddle.net/mVqY6/
This will only work if the text is not too long and if the text is positioned over the background image. In that case you'll need to do some tweaking.
If you are trying to put in a horizontal line level with the mid-line of the text, border-bottom is not really going to work is it?
Off the top of my head I would be using a single pixel .gif image stretched to 100% of the remaining space and aligned to the middle of the text... or if you want pixel perfect alignment to a specific text size, use a 1px wide .gif that has your line in it, plus x number of transparent pixels below.
You could introduce an SVG line, or float a DIV beside your text that is half height, with a border top or bottom. The DIV solution would probably make the most sense if you want to stay in pure CSS/HTML.
I am creating a webpage (first time) and i'm following as much of the CSS rules and tags as I can. However, I ran into a problem with white space. I've underlined the first line of text but now the second line seems to have drifted below. Is there a way to make it a bit more snug, i'd like the second line of text to be just below the above line.
body,td,th {
color: #000000;
}
body {
margin: 0;
padding: 0;
padding-top: 6px;
text-align: center;
background-color: #FFFFFF;
}
#centered
{
width: 800px; /* set to desired width in px or percent */
text-align: left; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
}
.style3 {
font-size: 32pt;
color: #666666;
margin-left: 0px;
border-bottom: 3px double;
}
.style5 {
margin-left: 390px;
font-size: 32pt;
color: #CCCCCC;
}
-->
</style></head>
<div id="centered">
<body>
<p class="style3"> FIRST LINE OF TEXT</p>
<p class="style5">INDENTED SECOND LINE</p>
</body>
</div>
</body>
</html>
You need to adjust the line-height. More specifically, add the following declaration:
.style5 {
line-height: 0.72em;
}
If you only want the first line of .style5 to be snug, you need to adjust the top margin. Use this declaration instead:
.style5 {
margin-top: -10px;
}
See fiddle.
Note: You should always validate your markup using the W3C Markup Validation Service and your css using the W3C CSS Validation Service. It will help you a lot when you're starting out.
p.style3, p.style5 {
margin-top: 2px;
margin-bottom: 2px;
}
Play with those two values until you are happy with the result :)
Have you tried the CSS line-height rule?
http://www.w3schools.com/css/pr_dim_line-height.asp
hmm. your code little buggy. first i see that you have div OUTSIDE of body tag.
try to validate your code.
anyway you can change the space weebven lines in the same paragraph with : p {line-height:0.7em} this creates a 7/10 line height of the font size.
if you want to decrease space between paragrapsh you shold change the margin|padding of the paragraphs. p{margin:0 91px 0 37px;padding:0 43px 0 19px}
In my project we need to display code snippet, so I am using pre and code(both) tag.
PROBLEM
While displaying the code snippet it is displaying white spaces before and after the actual content. How to remove these white spaces before and after the snippet.
Remove the whitespace inside your pre tag.
Example:
<pre>
This is a test.
We want a new line here.
</pre>
should be
<pre>This is a test.
We want a new line here.</pre>
With HTML 5 pre tag doesnt supported anymore if you want to use its features.
Make your own css class like this...
.pre
{
border: 1px solid #999;
page-break-inside: avoid;
display: block;
padding: 3px 3px 2px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
/*white-space: pre;
white-space: pre-wrap;*/
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333333;
}
.pre code
{
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
Cancelling /*white-space: pre;
white-space: pre-wrap;*/ will make your white spaces works like div.
use it as a class to give the same look to your elements.
The <pre> tag is for pre-formatted text. That means you need to do the formatting yourself - all of it, including making sure the whitespace is exactly what you want to display. Don't output excess whitespace between your <pre> tags and the content inside of them.
You need to make sure the code is formatted correctly, the pre tag tells the browser to show the text inside the pre "as is".
A little thing that I my self has found useful is to use this php to import the file so I don't have to cut and paste all the time.
<?php
$file = "code/hello_world.c";
print "<p>Filename: ".$file."</p>\n";
print "<div class=\"codebox\"><pre>\n\n";
$lines = file($file); foreach ($lines as $line_num => $line)
{
echo htmlspecialchars($line) . "";
}
print "\n</pre></div>\n";
?>
And then to make it look like code I add this in my css
PRE {
font-family: 'Monotype.com', Courier New, monospace;
font-size: 0.7em;
}
.codebox {
width: 90%;
background-color: #000000;
color: #FFFFFF;
}
.codebox pre {
margin: 0 0 0 20px;
}
Maybe you find it helpful.