I'm trying to set background color for a whitespace within a span. But it won't show up when the whitespace span happens to be at the point when line wraps.
HTML
asdfghjklkqowbvaa<span> </span>a
CSS
body {
font-family: monospace;
font-size: 40px;
}
span {
background-color: black;
}
JSFIDDLE
Alter your css for the span to show white spaces, just like in the <pre> tag.
Take a look at the different white-space options
span {
background-color: black;
white-space:pre;
}
From the mentioned resource here is a nice table what the different options for white-space will do:
New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap
If you add a to your span, the string will not break anymore on your space but instead 'glue' the two parts together, without wrapping the string on the space.
Another option if you do not want to rely on CSS for any reason is using the non-breaking space: , or
(see here for more information about it)
Related
I'm trying to put a link called Submit resume in a menu using a li tag. Because of the whitespace between the two words it wraps to two lines. How to prevent this wrapping with CSS?
Use white-space: nowrap;[1] [2] or give that link more space by setting li's width to greater values.
[1] § 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3
[2] white-space - CSS: Cascading Style Sheets | MDN
You could add this little snippet of code to add a nice "…" to the ending of the line if the content is to large to fit on one line:
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
If you want to achieve this selectively (ie: only to that particular link), you can use a non-breaking space instead of a normal space:
<li>submit resume</li>
https://en.wikipedia.org/wiki/Non-breaking_space#Encodings
edit: I understand that this is HTML, not CSS as requested by the OP, but some may find it helpful…
display: inline-block; will prevent break between the words in a list item:
li {
display: inline-block;
}
Bootstrap 4 has a class named text-nowrap. It is just what you need.
In your CSS, white-space can do the job
possible values:
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: break-spaces
white-space: normal
I was trying to underline my whole heading (h1), which is divided into two lines like this:
And I've done it successfully but didn't quite understand the logic behind it, i.e. when I apply this CSS, it didn't work:
CSS:
.main h1 {
font-size: 65px;
text-transform: capitalize;
font-weight: bold;
border-bottom: 5px solid #1A77FF;
}
Whereas, when I added span tag it worked for me
CSS:
.main h1 span {
font-size: 65px;
text-transform: capitalize;
font-weight: bold;
border-bottom: 5px solid #1A77FF;
}
Can anyone please explain this to me? Thanks in advance.
Sure.
Any heading tag (like an h1) is a block level element so any border applies to the block as a whole rather than the text inside.
A span is an inline element and is only as wide as the content (with certain constraints). So the bottom border only applies to the span content even when the line breaks.
Mozilla.org (Understanding the inline box model)
Inline boxes are laid out horizontally in a box called a "line box":
If there isn’t enough horizontal space to fit all elements into a single line (or the line is forcibly broken), another line box is created under the first one. A single inline element may then be split across lines
When an inline box is split across more than one line, it’s still logically a single box. This means that any horizontal padding, border, or margin is only applied to the start of the first line occupied by the box, and the end of the last line.
H1.block {
border-bottom: 3px solid red;
}
H1 SPAN {
border-bottom: 3px solid blue;
}
<h1 class="block">BLOCK FORMAT</h1>
<h1><span>INLINE <br/> FORMAT</span></h1>
<div> is a block level element whereas <span> is an inline element.
When you use <div>, it wraps the text in a complete block as follows. So, border property is applied to that whole block.
And when you use <span>, it wraps the content line by line. So, when border property is added, it is shown under each line.
How can I insert multiple spaces between words in a div but still make it word wrap?
You can use the CSS property white-space: pre-wrap; to indicate to the browser that the contents of the element are pre-formatted (so should consider the whitespace significant and not remove it) and still line wrap.
div {
font-size: 26px;
white-space: pre-wrap;
}
<div>This is text with spaces that wraps.</div>
If you need it for all of the words in the <div> or if there's a good reason to put a <span> or something around the words you do need it for you could also try the css property word-spacing.
selector {
word-spacing: /*some length depending on your font*/
}
I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.
How would I target just the first lines using CSS or HTML?
Use the text-indent property.
p {
text-indent: 30px;
}
jsFiddle.
In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.
p:first-line {
color:red;
}
p {
text-indent:40px;
}
http://jsfiddle.net/Madmartigan/d4aCA/1/
Very simple using css:
p {
text-indent:10px;
}
Will create an indentation of 10 pixels in every paragraph.
Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:
<p style="text-indent: 40px">This text is indented.</p>
Source: https://www.computerhope.com/issues/ch001034.htm
I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:
p::first-line { text-indent: 30px; }
This did not work. So, I created a class in my CSS and used it in my html as follows:
in CSS:
.indent { text-indent: 30px; }
in html:
<p class="indent"> paragraph text </p>
This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.
Here you go:
p:first-line {
text-indent:30px;
}
Didn't see a clear answer for a CSS newbie, so here's an easy one.
first indent all lines (1), than outdent the first line (2)
padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
I ran into the same issue only I had multiple <p> tags I had to work with. Using the "text-indent" property wanted to indent ALL of the <p> tags and that's not what I wanted.
I wanted to add a fancy quote image to a list of testimonials, with the css background based image at the very beginning of each quote and the text sitting to the right of the image. Since text-indent was causing all subsequent paragraphs to indent, not just the very first paragraph, I had to do a bit of a workaround. The same method applies if you aren't looking to do an image though.
I accomplished this by first adding an empty div to the beginning of the paragraph I wanted indented. Next I applied a small width and height to it to create the invisible box and finally applied a left float to make it flow inline with the text. If you are using this for an image, make sure to add a margin to the right or make your width a bit wider for some white space.
Here's an example with the CSS inline. You can easily just create a class and add it to your CSS file:
<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
I'm trying to put a link called Submit resume in a menu using a li tag. Because of the whitespace between the two words it wraps to two lines. How to prevent this wrapping with CSS?
Use white-space: nowrap;[1] [2] or give that link more space by setting li's width to greater values.
[1] § 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3
[2] white-space - CSS: Cascading Style Sheets | MDN
You could add this little snippet of code to add a nice "…" to the ending of the line if the content is to large to fit on one line:
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
If you want to achieve this selectively (ie: only to that particular link), you can use a non-breaking space instead of a normal space:
<li>submit resume</li>
https://en.wikipedia.org/wiki/Non-breaking_space#Encodings
edit: I understand that this is HTML, not CSS as requested by the OP, but some may find it helpful…
display: inline-block; will prevent break between the words in a list item:
li {
display: inline-block;
}
Bootstrap 4 has a class named text-nowrap. It is just what you need.
In your CSS, white-space can do the job
possible values:
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line
white-space: break-spaces
white-space: normal