I want to align text within a list of items containing superscript such that the main text are equally spaced vertically:
HTML:
<ul>
<li>Shape: Rectangle</li>
<li>Length: 5m</li>
<li>Breadth: 3m</li>
<li>Area: 15m<sup>2</sup></li>
<li>Color: Blue</li>
</ul>
I have tried tinkering with the display, height, line-height and vertical-align properties in CSS. But none seems to work. Can anyone help me please? Thanks.
The cause of the problem is that superscripts tend to make line spacing uneven. Setting line-height to a sufficiently large value like 1.3 may help. But in general, it is best to avoid using the sup element and construct your own superscript element, using span and style that creates a superscript using relative positioning (which does not affect line spacing, unlike the vertical alignment caused by sup).
In this specific case, there is a much simpler and better approach: instead of <sup>2</sup>, use ², or enter directly the superscript two character “²” (on Windows, you can do that using Alt 0178). Being a normal character, it does not affect line spacing, and being designed by a typographer, it can be expected to look better than any superscript 2 created using HTML or CSS.
This might help you: http://jsfiddle.net/Wexcode/TgqQY/
HTML:
<ul>
<li><span></span><span>Shape: Rectangle<span></li>
<li><span></span><span>Length: 5m</span></li>
<li><span></span><span>Breadth: 3m</span></li>
<li><span></span><span>Area: 15m<sup>2</sup></span></li>
<li><span></span><span>Color:</span> <span>Blue</span></li>
</ul>
CSS:
ul { list-style: none; }
li { background: red; height: 50px; margin: 3px 0; padding: 5px 0; }
li span:first-child { height: 100%; }
li span { vertical-align: middle; display: inline-block; }
Depending on format, you can try lowering the font size just before calling the <sup> tag:
...<br/> <li>Area: 15m<font
size=-1><sup>2</sup></font></li>
...<p/>
There is still a slight spacing gap, but it is not really noticeable.
Related
I have a site powered by Wordpress, and on one of my posts I have the following text.
Any readers interested in the different ways to interpret utils are encouraged to read about the difference between Ordinal and Cardinal Utility.
If Wordpress can't put all of the text "Ordinal and Cardinal Utility" on the same line as "between" it puts it all on a completely new line, which can look really clunky, especially on mobile. Because it's a hyperlink it's prioritising keeping it as one item whereas I'm happy for the words to be split over multiple lines, just as it would if it wasn't a hyperlink. I know this is a basic problem but for some reason I haven't found any solutions online. Is there an easy way to fix this?
The CSS property you're looking for is either white-space: nowrap or display: inline-block, depending on the look/style/effect that you're going for. By default, the <a> anchor element is an inline display, which allows the text to wrap.
Here are a few examples:
div {
width: 200px;
background: #e4e6e9;
padding: 10px;
margin: 10px;
}
a {
background: #0094ee;
color: #fff;
text-decoration: none;
}
.ib {
display: inline-block;
}
.ws-nw {
white-space: nowrap;
}
<div id="a">
Usually, links are "inline" which means they wrap around once they hit the side of the container.
</div>
<div id="b">
You can have them set to inline-block to prevent broken wrapping, but the text still wraps. inside the block
</div>
<div id="c">
You can avoid any wrapping at all by setting it to white-space: nowrap;. Be careful on super long text though because it can cause unexpected results on small containers.
</div>
div contains single line texts as li elements
div width is determined by widest item width.
If mouse is over some item, its font style changes to bold.
If mouse is placed hover wide items, bold font causes width increase and this causes div width also
to increase.
This looks very ugly if mouse is moved in list.
How to disable this increase without using hard-coded width?
I tried overflow: hidden style as shown in code below but div width still increases.
html:
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product2</li>
...
css:
.site-leftpane {
background-color: #FBFBFB;
clear: left;
color: Black;
float: left;
margin: 0;
overflow: hidden;
padding-top: 1em;
}
.tree {
line-height: 1.6em;
list-style: none outside none;
margin: 0;
padding: 0;
}
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
.tree li:first-child {
font-weight: bold;
}
.tree li a:hover {
color: #E47911 !important;
font-weight: bold;
}
Update
I chaged style according to proposed answer to
.tree li a {
color: #333333;
cursor: default;
display: block;
font-family: "arial","sans-serif";
margin: 0;
}
But problem persists. Web page can used in different screen resolutions. Texts are created by customer at runtime. Right side of contains other div which automatically uses remaining space.
I do'nt knwo how to use hard-coded max-width in this case. max-width specifies maximum allowd div width. Usually in this case div width is smaller, hover causes its increase and thus max-width does not solve the issue.
I had a similar problem and found one way to fix it was by using some jQuery, simple and works:
$('.menu-item').each(function() {
$(this).css( 'width', $(this).width()+'px' );
});
Basically you have jQuery "hard-code"/set the initial width of each of your class elements that was calculated by the browser based on text length and font settings, so that when you hover over each element which say changes the font-weight of the text, then the width won't change, it will remain the same as it was initially.
Ok, this isn't a great answer, but may provide a quick fix, from which someone else could base a real answer :)
Playing around with your HTML/CSS I was able to get what you want (well, emulating a dynamic max-width) by adding duplicate entries for each <li> in the list, adding a "pad" class, which basically hides the content.
<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li>Product1</li>
<li>Product It's a product, yes.</li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>
And in the CSS I added this to the end:
.tree li.pad {
line-height: 0;
font-weight: bold;
visibility: hidden;
}
What it basically does it add hidden entries for each of your list items, but the pad class makes the additional entries zero-height, but bold (and hence the correct width). It kind of relies on you being able to generate the HTML side, to allow adding the duplicate entries.
However, I think that this is a terrible solution, for numerous reasons (it's adding redundant data, it would mess up any non-visual browser, ...).
Try adding padding:0px and margin:0px to your :hover, also you could add a max width to your div to keep your width at a single size. This in my opinion would fix your problem.
I don't think you can be certain of the actual pixel width when your server builds your page.
The users browser does all of those calculations, and it doesn't really expose them (though client-side scripting languages & toolsets like jQuery can see the end results).
Honestly, your best bet is to either assign a fixed-width to the items, calculated well ahead of time, and accept that long text might line break. If this doesn't work for you, the other option you have is to change the hover behavior. Perhaps instead of making the text bold you could change the text/background color? This would be an alternate way to indicate the currently hovered item and it won't change the character size or spacing.
How can I remove the space between the <fieldset>'s in the following example? Here's a JSFiddle.
HTML
<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>
<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>
CSS
*
{
margin: 0;
padding: 0;
}
fieldset
{
background-color: red;
display: inline-block;
}
I'd like to be able to leave space between the <fieldset>'s in the HTML code, since their contents are quite long. But I need them to display right next to eachother.
The best solution is to remove any spaces between inline-block (or inline) tags.
You can use comments for better readability:
<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>
There is no CSS solution which can be 100% reliable.
EDIT: it doesn't seem it's the case but some template engines provide this behaviour, like twig's spaceless
Demo
How about float: left;:
CSS:
fieldset {
background-color: red;
float: left;
}
A different solution is to put the fieldsets in a DIV container and set the font-size to 0 using CSS for that container. Then, of course, set the font-size of the field-sets back to whatever you need it to.
Setting the font-size to 0 on parent container basically removes the white-space between inline-block elements of that container.
Line-height causes gaps between images and other elements but changing its value to 0 makes any text impossible to read, is there any easy fix for that?
Imagine some repeatable DOM element like a shadow, how would you erase gap between this element and anything that is above (may be an image, div, span, button, form)?
Setting class for this .shadow and giving it line-height of 0 of course doesn't work as line-height works a bit differently.
I made 3 images, the first one shows what I'm talking about, the second one fixes it, the third one shows how the second one in fact destroyed the whole layout:
http://jsfiddle.net/J5PLf/
I'm thinking about something like:
body {
line-height: 0;
}
p {
line-height: 1.2em;
}
But I guess it's a bit risky, what if there will be some free text not within tags?
Don't mess with the line-height propety, and set display:block at the images.
Fiddle: http://jsfiddle.net/J5PLf/1/
#example1, #example2, #example3 {
width: 200px;
float: left;
}
img {
display:block;
}
How to automatically change the space between the letters.I want the text to take up the entire width of the div. Text is not static. (Always changing text, can be 123" or "text text"...)
<style type="text/css">
#menu{
width: 200px;
background-color: #000;
color: #336699;
font-size: 16px;
letter-spacing: 100%;
}
</style>
<body>
<div id="menu">
tekstas
</div>
EDIT: Unfortunately this only changes word spacing, not letter spacing. There is not way to do kerning in CSS. Possibly CSS3, however.
This is easily accomplished with the text-align: justify CSS attribute:
#menu
{
width: 200px;
background-color: #000;
color: #336699;
font-size: 16px;
text-align: justify;
}
There is no way of doing this purely with CSS. The letter-spacing attribute doesn't take percent values. text-align: justify won't work either because it only affects the space between words, not the font kerning and it also only applies to those rows of text that are followed by another row.
You could try using JS to do this by counting the number of characters in a particular div and then calculate the needed space between the characters so it would fill out the width, but this solution would only work right with mono-spaced fonts (fonts that have the same width for all the characters).
Here's a solution will not work for everyone, but it turned out to solve the problem for me: if you are displaying a short amount of headline text, you can put a space between every character of every word "L i k e t h i s".
For my particular design, this happens to look fine, and of course it allows align: justify to fully do its magic within the div.