In a subnavigation of a Website I try to have the link Suite «Mont Blanc», which was read out of the Backend to be wrapped like this:
Suite
«Mont Blanc»
And not:
Suite «Mont
Blanc»
I know there is but if I insert that in the Structure-Element Name (which is listed as a link), the link will not work properly anymore.
Is there a kind of invisible non-breakable space I could use?
Use like this: Demo
CSS:
span{
white-space: nowrap;
}
HTML:
Suite
<span>«Mont Blanc» </span>
EDIT:
If you need span content in next line You can try like this: Demo
span{
clear:both;
display:block;
white-space: nowrap;
}
Use CSS to prevent wrapping:
white-space: nowrap;
You could wrap it in a span like this:
Suite<br />
<span style="white-space: nowrap;">«Mont Blanc»</span>
The white-space: nowrap; CSS prevents wrapping, even if the outer div is smaller than the text.
Related
Okay. So I have a div full of spans and every span has a word or a few inside. The div fits multiple rows and has a fixed width. I need the span contents to stay same on the same row, not to break so that one word in a span is on the first and the rest of the words on the next one.
Let me give you a small example.
HTML
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
CSS
div{
text-align:center;
width:400px;
}
span{
margin-right:10px;
}
Now the result I'm looking for is something like this:
Hamburgers Pizza and hotdogs
Milk and beer Kids menu
But what might happen is this:
Hamburgers Pizza and hotdogs Milk
and beer Kids menu
I tried setting white-space: no-wrap but that just set everthing on one row. I have a feeling that using the white-space: no-wrap the right way is the key, but I haven't got to it yet.
I hope you get the point what I'm trying to achieve and where I am now.
white-space: nowrap; will prevent any type of line wrapping. It sounds like you want to use non-breaking spaces in your titles, which will prevent the phrases from wrapping in the middle. For example:
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
Note: the is called an HTML entity. It will render just like a regular space character to the end-user, but it tells the browser to not allow words to be broken into multiple lines.
See this reference: W3CSchools white-space reference
You can apply white-space: pre to your spans using css. This will allow them to wrap on line-breaking white-space characters, but not other white-space characters.
div {
text-align: center;
width: 400px;
border: 1px solid red;
}
span {
margin-right: 10px;
white-space: pre;
}
<div>
<span>Hamburgers</span>
<span>Pizza and hotdogs</span>
<span>Milk and beer</span>
<span>Kids menu</span>
</div>
I have a link in a navigation menu that doesn't wrap properly on IE10.
When there is a conditional plural using brackets, IE10 cut off the word into 2 separated lines. I am expecting the whole word "link(s)" to go to the next line if there is not enough space, like Chrome is doing.
It's supposed to look like this:
Hello worldddd
link(s)
I tried to use the different word-wrap and word-break attribute but it doesn't fix it. If I use white-space: nowrap, the word doesn't go to the next line. I don't want to force the word to go to the next line for all browsers.
Do you know what I can do to fix this IE issue?
Let's say you have a text like this:
<p>this is a longer <span class="nowrap">test(s)</span></p>
Then all you need to do is apply following CSS:
p {
word-break: break-word;
}
#media all and (-ms-high-contrast:none)
{
/*target IE10*/
.nowrap {
white-space: pre;
}
/*target IE11*/
*::-ms-backdrop, .nowrap {
white-space: pre;
}
}
working jsfiddle - you can resize HTML input area to see the difference
I have a simple two-word header, from which I would like to remove or hide the last word, instead of wrapping it to the next line, when there is not enough room in the window for both words.
<h1>First Last</h1>
I know that there are no first-word selectors for css, so that's not an option. I could hide the overflow, but I want the last word to disappear all at once, not letter by letter. And of course, white-space:nowrap; comes to mind, but that doesn't remove the word.
Is there a way to do this with css? Preferably without fixed heights or widths?
http://jsfiddle.net/pnaL4/2/
There is no possibility to select a last word from a tag. The only possibility I could think of was to use a media query that loads this custom CSS when the line size is too small:
h1 {
visibility: hidden;
}
h1:before {
visibility: visible;
content: "First";
}
Of course, this would require you to specify the showed content.
Simple. Use a white-space:nowrap; CSS Property.
h1 {
white-space: nowrap;
}
This will ensure that even if the window resizes, the text will not wrap down and get hidden as the window shrinks.
Here is the WORKING DEMO to illustrate the issue.
I ususally do something like
h1 {
font-size: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 745px;
}
ellipsis outputs ... to show there is more text to come, if you don't want anything at all I would do
text-overflow: inherit;
another good tip if you are cutting of text is to add a title attribute to the h1 so that the user can see the full word on hover.
eg
<h1 title="First Last">First Last</h1>
If you let the overflowing word(s) break to the next line, you can use an overflow with a height instead of width to create that effect:
h1 {
height: 30px;
overflow: hidden;
}
Example
I have the product name and pricing as separate spans insides a link to work properly with Rich Snippets. Some products have larger length names than others so I'm truncating the length so it fits the box I have. Previously this was done on the server but I'd prefer to have it handled with CSS so any changes to the design doesn't involve the backend pages changing.
The problem is I cannot make the spans line up next to each other. With tinkering the display attribute, the text-overflow property does not work. The problematic code is below:
HTML:
<div class="details" itemscope itemtype="http://data-vocabulary.org/Product">
<h2>
<a class="heading" href="/product/acmesw" title="Acme Super Widget">
<span class="trunc" itemprop="name">Acme Super Widget 3000</span>
<span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">- <meta itemprop="currency" content="AUD" /><spanitemprop="price">$199.95</span></span>
</a>
</h2>
CSS:
.details {
width:300px;
border:1px solid red;
}
.trunc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width:60%;
}
h2 span {
display:inline-block;
}
jsFiddle here: http://jsfiddle.net/c7p8w/
Hard to answer because your fiddle doesn't show the problem. You should be able to fix the issue by giving both spans the same vertical-align setting. Try giving them both vertical-align:top;.
Edit: Ah, I see the issue in IE.
Working fiddle here: http://jsfiddle.net/c7p8w/1/
I have the following structure:
<ul>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
</ul>
When the text of the p exceeds the 10px limit I would like it to continue in a new row.. How do i do that? Thanks
Your example already word-wraps (because<p> is already a block element), if you want to break words, then you could try:
p.letters {
word-wrap: break-word;
}
Here's a basic working example: http://jsfiddle.net/G9z5M/ (see updates below).
You can play around with it using various techniques:
/* Wraps normally, on whitespace */
p.words {
word-wrap: normal;
}
/* Hides non-wrapped letters */
p.hidden {
overflow: hidden;
}
/* Outputs a single line, doesn't wrap at all */
p.nowrap {
white-space: nowrap;
}
See updated fiddle: http://jsfiddle.net/G9z5M/1/
For me it worked
white-space: initial;
May be it helps to someone else.
Normaly p elements are block so the width is respected, and it should wrap at 10 pixels.
See http://jsfiddle.net/ejLmu/
If it does not work for you it means that you have some css rules that override the default settings. You either have set display:inline (in which case the width is not respected), or a white-space:nowrap; (which disables the text-wrapping).
I am not sur I do understand your question but with CSS you shoudl try :
word-break: break-all; // normal; // keep-all;
And if you want to hide extra content :
overflow: hidden;
You should use
style="width:10px; display: block;"