Even though text are same length in HTML source, they are not displayed as aligned. I want to display both texts with the same width.
Please see the screenshot
If you'd like to do the alignment simply with the text/font you need to use a monospaced font type. Other possibilities would be to use a table or CSS.
Related
I have a set of fields forming line items and the fields text are aligned to the right currently. In most cases it works fine, however when the number exceeds the input width then the text/numbers are displayed from left to right. While it is an extreme case, I'm wondering if there is a way to always anchor the field text to the right.
As pointed out in the comment. The solution in stackoverflow.com/q/1962168/1059070 is what I was looking for.
I have some little problem setting the right height of some informative boxes.
If you go in this example page you can simply understand what my problem is: http://onofri.org/example/example3/test2.html
As you can see under the Main Report area I have 3 boxes.
The problem occurs in the boxes titled as Links and in Work Supported by Japanese Trust Found
As you can see these boxes contain some informative text. The problem is that if I enlarge the character (in the browser, using CTRL+) this informative text goes out of the box (it goes out of the bottom of the box)
Is there a way to solve this problem? I want that box always contains its content.
Thanks in advance.
Use the min-height property to set the height. This allows the boxes to "grow" when needed.
Here's an example: http://jsfiddle.net/43MjD/4/
Don't give the div a height so the box will expand as the text does.
In Coda, my text float divs work perfectly. The text and the divs are both 1 em:
However, once I go to look at this same site in Chrome, the text now listens to the div below it, and as you can see the text is all on one line:
What's wrong here? HTML/CSS: http://jsfiddle.net/u773M/2/
The size of your font is currently too big. Set a smaller font size on the anchor (not the list item, as that will change the size of your steps) and add set the anchor to display: block.
Without the proper space for the letters to spread out, they are just getting cut off and not rendering correctly.
Giving widths to the text area or max-width (newer browsers) and either floating or displaying these will help with cross browser implementation - I have had similar issues before and you will find ie7 likes widths on text to be set dependant on the mark-up that surrounds.
I recently launched a responsive version of my site, however I'm finding that percentage width divisions containing a number of single lines of text look really bad, as fitting everything on a single line in both the desktop and mobile views results in each single line of text being either too long or too short.
My markup is a single unordered list of links (with long anchor texts) - does anyone have any suggestions to truncate the anchor text according to the width of the containing division?
I can come up with two options:
One is to do it yourself using javascript as described here:
Calculate text width with JavaScript
I don't think there is any way to determine the width of the text until the browser actually renders the text.
Make sure you don't display: none it, or the browser won't actually render it and you can't determine the width.
The second is to let CSS do it for you; it's easier, but you lose pretty much all flexibility:
If you're willing to let CSS guess at how to cut off your text into ellipsis, you can try text-overflow: ellipsis
http://www.quirksmode.org/css/textoverflow.html
jsFiddle
In this jsFiddle I've got two images and then some text. I want it to appear like this:
note: the images and text should be sitting on the same horizontal axis, the text is not supposed to be higher
So what I'm trying to do is make the text appear over multi-lines within a box with a width of 150. How can I do this?
Is this what you're trying to do?
As you can see I've only changed your CSS a bit by adding a display:inline-block to your text container.