What css code should I use to align text according to instead of ?
I have tried using position: absolute on yet it doesn't work.
Example(Notice the spacing between those annotation is the same but not the their bases):
ruby{font-size: 20px;}
<ruby>我<rt>1</rt>係<rt>2222222</rt>香<rt>33</rt>港<rt>444</rt>人<rt>5555</rt></ruby>
I expect aligning the text with its bases instead of those text annotation. How can I achieve this Thank you.
Related
I am setting up a simple blog website and need help formatting the posts that are submitted to the front page of the site.
You can achieve this in multiple ways. Maybe the easiest way is to put your text in a container and give this a width. The text will wrap itself.
<div class="text">Your text here</div>
and your CSS. If you want to break within the word you can use word-wrap:break-word;.
.text {
width: 100px;
}
You have many options for this. simple one put you text in a <div> tag and give width to div as much you like.
<div style="width:100px">"Hello, this is my first post. As you can see, it wraps all the way around the text box and into another line."</div>
You should add a word-wrap css property and set it to break-word. This forces the text to wrap inside a container.
.container {
word-wrap: break-word;
}
I have a bunch of text and images in a line and i want to align vertically. It all seems to work except I just added some bold text and the bold text seems to show up a little lower than the regular text.
here is a screenshot:
here is a simpliried view of my html:
<span class="midAlign">
Filter: [<b>Apps: </b>My App Name ]
</span>
here is my css:
.midAlign * {vertical-align: middle;}
if I remove the bold tag, it seems to line up correctly:
The problem is that the .midAlign * only applies to the <b> element. Just removing the * solves the problem.
I have a bunch of text and images in a line
So when you use .midAlign * it applies to all the elements, so the face is you don't need to apply that property to all elements, you need that for img only so use
.midAlign img {
vertical-align: middle;
}
And it will solve the issue.
Demo
Also, when you use the * selector, it impacts the performance, you are using that for no good reason for this particular case.
I will explain you why that happened. b and img both are inline elements, so when you apply vertical-align: middle; it aligns the element to the baseline, so say we have an img and a b tag, so b will be vertically aligned middle considering the entire height of an element... see this
So when you are using middle as the value, it's middle but, to the entire element height and not just your text
Demo
So technically your b tag was aligned middle vertically, but it's just that you don't have to align that, so use specific element selector instead of a generalized * selector.
I would like to ask how can I give my text ONLY with the background-color property and not the spacing using CSS or HTML or both.
For example,
Hello everyone!
I only want the background-color to show on Hello and everyone! and not the entire length of Hello everyone!
I have tried searching in the Internet but I can't find any solution.
Thanks!
Wrap each word in a span element and give the span elements background colours.
Try placing your text inside a wrapper, and style it with
display: inline;
background-color: whatever;
Note that if you use a wrapper which is inline by default (e.g. <span>), you don't need display: inline.
There's a lot of different ways to do this, but for a beginner I'd recommend wrapping all text with <span>.
Here's a fiddle.
I've got some text and I need it to overflow off the left side of its container (I hide the overflow). Basically, I want it to look like this:
Apparently, you have to you direction: rtl; to do this. Fiddle here.
The problem is that this changes some of the order of the text: hello, world? is displayed as ?hello, world, and 1+2=3 is displayed as 3=1+2.
I've tried playing with the unicode-bidi property, but I can only get that to put things completely right to left.
So, here's the actual question: How can I get text to overflow off the left side of its container without reordering the text?
Try:
text-align:right;
white-space:nowrap;
overflow:visible;
If you have a specific block of text you need to manipulate try the text-indent property with a negative value like so:
text-indent: -20px
This probably won't work for dynamic text though.
You will need to wrap the English text into a span which has direction LTR, and the overflowed text has "inline-flex" like the following:
<div style="direction:rtl;width:150px;overflow:hidden;text-align:right;white-space:nowrap;">
<div style="display:inline-flex">
<span style="direction:ltr;">Hello people, I'm asking: 1+1=2, or what???</span>
</div>
</div>
You will get: http://codepen.io/anon/pen/xKfGa
It is some how complicated, but I think this is the only right way, although it won't display perfectly on IE.
I have text in a <div> that I want centered vertically. Any easy way to do this (non-absolute positioning method).
this is another method:
http://jsfiddle.net/SebastianPataneMasuelli/V2D3L/1/
the trick is to make the height of the div the same value as line-height.
<div>some text</div>
div {
line-height: 100px;
height: 100px;
}
this gives you a line of vertically centered text.
there is a way: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.
sorry, that uses absolute positioning.
(but it works)
Yes it is possible - a very thorough investigation can be found here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
No, unfortunately there is not good way of doing this using CSS. I would suggest using a javascript framework like JQuery or something like that a go to achieve this. Is it just text your are trying to vertically center?
Also, I know many people are reluctant to use tables however html tables will allow you to vertically center your text, so that may be a quick work around if you are not willing to use javascript to achieve this.
So I guess the its either use some javascript and avoid using html tables or just use tables to do your vertical centering for you.
Just for you reference you use the valign attribute on a td element of a table to vertically align its contents.
You could do something like this:
<div id="center-text">
<div id="center-text-inner">
hello there
</div>
</div>
$(document).ready(function() {
$('#center-text-inner').css({
'position' : 'relative',
'top' : ($('#center-text').height() - $(this).height()) / 2
});
});
Just add the following css to div
display:table-cell;
vertical-align:middle;
you can also see example http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/