I have a KnockoutJS template that creates a input[type=text] and a select next to each other with no <br/> inbetween. However it puts a linebreak between even with white-space: nowrap; I'm currently testing in chrome.
CSS:
table.grid tbody tr td {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
white-space: nowrap;
vertical-align: top;
}
Question: Why isn't white-space: nowrap; not working? Is there a fix to this or a way around it?
As noted above, this may be due to either/both your input and/or select elements being set to display at block level using display:block which will force them onto a 'new line' instead of displaying inline and following through with the anticipate nowrap behaviour
Demo Fiddle
I had a div inside my td. Inside the div had 2 button. Even with white-space:nowrap, display:inline-block and position:relative applied to all these elements it did still wrapped.
For me what did the trick was removing a float:left that was being applied to the buttons, from another class, since it "kind of force" the browser to act as those elements were display:block.
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 use white-space: pre-wrap for space at the beginning of tag.
And use word-spacing:1em to setup the space width.
But there is a problem that the space at the beginning of the tag is not 1em width, and other spaces are all right except it.
the code:
p{
white-space: pre-wrap;
word-spacing:1em;
}
<p> This is a paragraph.</p>
<p> This is a paragraph.</p>
My problem is how to change the width of space at the beginning of tag.
The word-spacing property will only affect the space between two words, so i would add this:
p
{
padding-left: 1em;
}
You can also use the text-indent. The text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a block.
p { white-space: pre-wrap; word-spacing: 1em; border: 1px solid; text-indent: 1em}
Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
In Chrome, on a paragraph element,
text-align: justify;
works fine and creates a block alignment, but has no effect in Firefox or Safari. Any suggestions?
Set the white-space property to pre-line. It will force to collapse into a single whitespace and the text will wrap on line breaks. This will help to block align:
white-space: pre-line;
Posting in behalf of the OP who posted the answer in comment
I believe I solved the problem:
white-space: pre-wrap;
was interfering so I used
white-space: unset;
to solve the issue.
On paragraph element or <p> is block label element but DTD says it's contain inline element. If text-align: justify not working you have to check your browser user agent stylesheet. If p is display: block / inline-block; then text-align: justify; will work.
P{
display: block; /* inline-block; */
text-align: justify;
}
It will solve your Firefox and Safari issue.
I've setup a demo of my problem at the following url: http://jsfiddle.net/YHHg7/4/
I'm trying to do the following:
legend {
display: block;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
However it seems all browsers ignore the display: block on a legend tag. Is this the correct behaviour for this tag or am I doing something wrong?
<legend> is a block-level element by default, so whether you include display: block there's no difference. However, it's treated specially together with <fieldset> by browsers as a label for a fieldset.
To "detach" it from the <fieldset> you can give it a non-static position, or float it, or even just play a little more with its margins. Results can be a little unpredictable, though, again due to the special treatment of both elements.
IMO the best thing you can do to control legend is just leave it as a semantic fixture only.
CSS:
legend {
display: block;
margin: 0;
border: 0;
padding: 0;
width: 100%;
}
And then use a span inside it to control all of your desired styling:
HTML:
<legend><span>Span to the rescue!</span></legend>
CSS:
legend span {
display: block;
padding: 0 20px;
border-bottom: 1px solid red;
}
Clean, semantic, and generally easily manipulated across different browsers
A legend is a block-level element by default. If I add the width back in using Chrome (Dev channel), the width of the legend is changed appropriately.
If you're instead wondering about the margin style, a legend can only have its left or right margins set, and that would place it relative to the fieldset its's contained in. If you want to add spacing to the other elements, then you would probably want to add padding to the fieldset itself.
Uncomment the width attribute if you want the red line to go all the way across.
legend {
display: block;
border-bottom: 1px solid red;
width:100%;
margin-bottom: 50px;
}
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