How to restrict for <sup> to go to the next line? Or at least somehow also show the previous word in the new line? I have an achor tags which links to a reference at the bottom of an article, but sometimes they will just go into next lines by itself, as you can see in the image. This can happen if there is a single <sup> too.
Currently I have this for css
left: -3px;
top: -0.5em;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
And this is html code for a single <sup>
<a class="footnote" title="V. Umeljić, (2004.), U svijetu cvijeća i pčela: Atlas medonosnog bilja, Zagreb: Tisak" id="return-note-4832-1" href="#note-4832-1"><sup>[1]</sup></a>
safasdfasdfasdfsd asdf sdaf asdf asdfsadf sa fdas fg dfg sddfg sdfgsfgg sfg sdfg sdfgsdfg<a class="simple-footnote" title="V. Gligić, (1954.), Etimološki botanički rečnik, Tuzla: Grafičar" id="return-note-5174-4" href="#note-5174-4"><sup>[1]</sup></a>
<a
class="simple-footnote" title="V. Gligić, (1954.), Etimološki botanički rečnik, Tuzla: Grafičar" id="return-note-5174-4" href="#note-5174-4"><sup>[2]</sup>
</a>
Working JSFiddle
Just replace your inline elements' spaces with like this:
<a class="footnote" title="V. Umeljić, (2004.), U svijetu cvijeća i pčela: Atlas medonosnog bilja, Zagreb: Tisak" id="return-note-4832-1" href="#note-4832-1"><sup>[1]</sup></a> <a class="footnote" title="V. Umeljić, (2004.), U svijetu cvijeća i pčela: Atlas medonosnog bilja, Zagreb: Tisak" id="return-note-4832-1" href="#note-4832-1"><sup>[2]</sup></a>
The looks like a space to a person, but the browser treats the last word in your paragraph and the links as a single string.
Related
I'm trying to make a text block that behaves like punctuation:
<style>
.punctuation {
display: inline-block;
white-space: no-wrap;
}
</style>
<span style="width: 100px; display: block;">
"a," "ab," "abc," "abcd," "abcde," "abcdef,"
<br>
a<span class="punctuation">X Y,<span>
ab<span class="punctuation">X Y,<span>
abc<span class="punctuation">X Y,<span>
abcd<span class="punctuation">X Y,<span>
abcde<span class="punctuation">X Y,<span>
</span>
This gives
But I want the wrap for the second part to be like
aX Y, abX Y,
abcX Y,
abcdX Y,
abcdeX Y,
I want the "X Y" block to behave exactly like the ,". i.e. it always stays at the end of the word before it, and the , and " never break a line.
But I can't get the "X Y" to go where the punctuation normally goes.
Is there a way to do this?
See https://jsfiddle.net/8zve4shf/
Just write the a , ab , abc , abcd , etc inside the span with punctuation class and it will behave as you expect.
I'm a newbie in html and css. I'm trying to make text go next line even if the text is not overflowed in css.
Now it gives from the page like,
However, I want to be like such as
Temperature : 13 Celsius
CO2: 345 ppm
Humidity: 13%
How can I do such a thing? I tried to find in google but couldn't find any solutions that I want.
Thanks in advance.
EDIT
I actually used tooltip function like below
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
and then the text that I showed above is in div title
<div id="my id" class="draggable js-drag" data-toggle="tooltip" data-placement="top"
style="display: block; position: absolute; left: 894px; top: 413px;"
data-x="894" data-y="413"
data-original-title="Temperature : 13.0 °C CO2 : 345 ppm Humidity : 13.0 %"></div>
Use multiple div.
The div is a display: block by default and would occupy the entire space in the line, forcing the other div onto the next line.
Refer code:
<div>
<div>Temperature : 13 Celsius</div>
<div>CO2: 345 ppm</div>
<div>Humidity: 13%</div>
</div>
EDIT
To apply a line break in data-original-title you need to add data-html="true" in your markup. Either you can manually add it in your markup or using jquery. And then you can add <br/> in your code.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip().attr("data-html", "true");
});
<div id="my id" class="draggable js-drag" data-toggle="tooltip" data-placement="top" data-html="true"
style="display: block; position: absolute; left: 894px; top: 413px;"
data-x="894" data-y="413"
data-original-title="Temperature : 13.0 °C <br/> CO2 : 345 ppm <br/> Humidity : 13.0 %"></div>
Simply add <br/> to your text to indicate line break
Temperature : 13 Celsius<br/>
CO2: 345 ppm<br/>
Humidity: 13%<br/>
Would this do?
<p>Temperature : 13 Celsius</p>
<p>CO2: 345 ppm</p>
<p>Humidity: 13%</p>
I would go with the DIV solution, P tag would give a default margin value which is not required for a simple line break.
<div>Temperature : 13 Celsius</div>
<div>CO2: 345 ppm</div>
<div>Humidity: 13%</div>
You could then set the line-height using
CSS:
div{
line-height:14px; /* for example */
}
I have experienced cross-browser problem that a line on a page in a narrow column is breaked too early despite the space left where the last word could easily fit.
Firstly I thought there is something wrong with my stylesheet but it looks the same in a simple fiddle which I created (no php tags, no line-breakers, etc.):
I am sorry as it's in Czech Language but for demo purpose I hope it's ok.
It shows the same bug in FF,IE and Chrome on Win7 and Win8, even on iPad.
Link to fiddle: http://jsfiddle.net/Grows/q9wqeu14/1/
Demo:
HTML:
<div class="column">
<p>Jsme tým zkušených profesionálů, který Vám pomůže s kompletním IT řešením. Spravujeme IT techniku jak menším firmám do deseti uživatelů, tak i velkým společnostem se stovkami stanic a desítkami serveů. Náklady na externí správu sítě jsou zcela individuální a závisí na rozsahu sítě (počet serverů, stanic, aktivních prvků apod.), dohodnuté frekvenci návštěv a garantované době servisních zásahů. U menších firem se tato částka obvykle pohybuje v jednotkách tisíců korun měsíčně, takže se určitě vyplatí více, než zaměstnávat vlastního správce sítě.</p>
</div>
<div class="column">
<ul>
<li>Individuální přístup a vstřícnou péči o uživatele výpočetní techniky</li>
<li>Pravidelnou údržbu výpočetní techniky - minimalizují se její výpadky</li>
<li>Garanci servisního zásahu - minimalizuje ztráty způsobené výpadkem</li>
<li>Řízení IT procesů - provozujeme systém HELPDESK pro hlášení servisních požadavků, telefonickou linku HOT-LINE a automatický monitorovací systém NAGIOS, který nepřetržitě monitoruje chod Vašich klíčových zařízení</li>
<li>Poradenství a konzultační služby</li>
</ul>
</div>
<div class="column">
<ul>
<li>Finanční úspora - IT specialistu využíváte jen tehdy, je-li to potřeba. Ušetříte na mzdových nákladech, odborných školeních apod.</li>
<li>Flexibilita - služba je smluvně garantovaná, nemusíte řešit nemoci, dovolené, zástupy apod.</li>
<li>Profesionalita - pracujeme v týmu, máme zkušenosti, kvalitní technické zázemí a podporu našich dodavatelů. Jsme schopni minimalizovat rizika výpadku sítě či je zkrátit na minimum.</li>
<li>Přenesení zodpovědnosti za bezproblémový chod Vaší sítě na dodavatele</li>
</ul>
</div>
CSS:
body {
font-size: 14px; font-family: 'Arial'; text-align: left;
}
.column {
width: 214px; border: 1px black solid;
}
li {
list-style-type: disc; list-style-position: outside;
}
What me and both my client see is the weird break between 3rd and 4th row but also in more text.
I tried to search similar questions here and Google it but no success.
Is this a standard browser behavior or there is something wrong?
I really don't want to use manual line-breakers like br, wbr, nbsp, etc.
Thanks a lot!
Cheers, Martin
---- UPDATED ----
Thanks for the given solutions guys so far.
There are no white-spaces of any kind it's just pure text, so I can't remove any.
Also it must stay in three divs.
I guess it's some weird behavior of czech language in browser but I didn't see something like this before.
Maybe I can't do anything with it and this could be an answer too :)
---- SOLVED ---
Emmanuel was right.
There was something weird with some space characters. When I deleted them and typed space again, it dissapeared. Thank you so much! If someone explain this to me I would be very happy because in the source-code there weren't any visible "white-space" like tags...
See Remove non breaking space from <h4>. In your editor, search for non-breaking spaces if you know how to do that, turn on a mode which displays them, or do a search-and-replace of non-breaking spaces with regular old sp0aces.
Remove second and third div like this:
<div class="column">
<p>Jsme tým zkušených profesionálů, který Vám pomůže s kompletním IT řešením. Spravujeme IT techniku jak menším firmám do deseti uživatelů, tak i velkým společnostem se stovkami stanic a desítkami serveů. Náklady na externí správu sítě jsou zcela individuální a závisí na rozsahu sítě (počet serverů, stanic, aktivních prvků apod.), dohodnuté frekvenci návštěv a garantované době servisních zásahů. U menších firem se tato částka obvykle pohybuje v jednotkách tisíců korun měsíčně, takže se určitě vyplatí více, než zaměstnávat vlastního správce sítě.</p>
<ul>
<li>Individuální přístup a vstřícnou péči o uživatele výpočetní techniky</li>
<li>Pravidelnou údržbu výpočetní techniky - minimalizují se její výpadky</li>
<li>Garanci servisního zásahu - minimalizuje ztráty způsobené výpadkem</li>
<li>Řízení IT procesů - provozujeme systém HELPDESK pro hlášení servisních požadavků, telefonickou linku HOT-LINE a automatický monitorovací systém NAGIOS, který nepřetržitě monitoruje chod Vašich klíčových zařízení</li>
<li>Poradenství a konzultační služby</li>
</ul>
<ul>
<li>Finanční úspora - IT specialistu využíváte jen tehdy, je-li to potřeba. Ušetříte na mzdových nákladech, odborných školeních apod.</li>
<li>Flexibilita - služba je smluvně garantovaná, nemusíte řešit nemoci, dovolené, zástupy apod.</li>
<li>Profesionalita - pracujeme v týmu, máme zkušenosti, kvalitní technické zázemí a podporu našich dodavatelů. Jsme schopni minimalizovat rizika výpadku sítě či je zkrátit na minimum.</li>
<li>Přenesení zodpovědnosti za bezproblémový chod Vaší sítě na dodavatele</li>
</ul>
</div>
You just need word-break: break-all; style to column. WORKING CODE
If you look specifically at:
řešením. Spravujeme
in a HEX editor, the "space" between the '.' and 'S' is actually 2 bytes:
C2 A0
C2A0 is a non-breaking space in UTF-8 HEX and a "normal" breaking space is HEX 20.
Since this is a non-breaking space, the browser doesn't consider it a valid point to break the word to line-wrap.
I have the following code:
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
I tried this in different browsers and the inner-anchor drops out of the outer-anchor in every browser. So it gets rendered as this:
<a id="outer-anchor" href="/test">
text in anchor
</a>
<a id="inner-anchor" href="/test2" style="display:none"></a>
Does someone know why and how to fix this?
Thanks in advance
You can't house anchor tags inside anchor tags.
This would move the childNode out of the outer-anchor to be it's sibling after it, and then hide it nicely;
JSfiddle
HTML
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
</div>
JavaScript
var outer = document.getElementById('outer-anchor');
var inner = outer.nextSibling;
inner.style.display = 'none';
inner.parentNode.removeChild(inner);
outer.parentNode.appendChild(inner);
Output
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">text in anchor</a>
<a id="inner-anchor" href="/test2" style="display: none;"></a>
</div>
parent-placeholder div purely exists to show how to relate to the parent DOM-element where the anchors are in.
I have images in this order : [image][image]
When i give each of them an url, - char suprisingly appears between them.I don't understand why - appears.
Here is the code :
<div style='float:left; width:320px;'>
<span>
<a href='http://www.boun.edu.tr'/>
<img style='width:75px; height:75px' src='$img_root/logo_bogaz.jpg' alt='logo bogazici university'>
</span>
<span>
<a href='http://www.gyte.edu.tr'/>
<img style='width:70px; height:70px' src='$img_root/gyte.gif' alt='logo gyte'>
</span>
</div>
And OUTPUT :
It is part of the underline from your anchor tag. You can remove the underline as per below. (Note this will remove it for all links)
Add this to fix:
<style>
a {
text-decoration:none;
}
</style>
Ideally this should go in a separate CSS file. But add it to the top of your HTML for an easy test.