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.
Related
I've researched similar questions and tried using display:table-cell; inline-block; vertical-align:middle all over the place, but I can't get this to work. In this sample Genesis theme page (please look), it demos the use of columns using 'one-half' and 'first' CSS classes. Using DevTools/Inspector you can go in and add <img src="http://placehold.it/140x240"> before the paragraph like I've shown below. Maybe there's something in the Genesis columns that's making this harder than it should be, or more likely I'm missing the obvious.
In that first column I need the img to appear to the left of the text, while the text is vertically aligned. I can't seem to find out the combination that will do it. NB I do know the height of the image - it's not dynamic. I could use spans if easier in stead of P.
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>
The key here is declaration of the widths. p by default will have 100% width even if you set the display to inline-block, so you need to set it up with something like this:
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
</p>
</div>
Note the classes added to the children, with the CSS now applied:
.OneHalfItem {
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
}
.OneHalfText {
width:calc(100% - 140px);
padding:10px;
}
Now it lines up nice and dandy, with the use of calc. Couple of things:
This works easily because the picture is a fixed width; if the imgsize is variable, you need to declare it's width as well (a percentage or something), then calculate the p size based on that
I eliminated the white space between the end of the img tag and the beginning of the p tag, because by default inline-block will add in a 4px margin to the right of each element. By removing the white space between the tags, it eliminates that empty margin.
Note that this will only work for IE9+ (and real browsers, of course), so if you need to support IE8- then you'll need to do the same kind of width calculation via JS, but easily done.
Here is a jsFiddle to show it working.
I have this sample text in my application : "welcome to stack over flow and welcome again". I am using this text and because of other elements, half of the text is coming down like this:
"welcome to stack over
flow and welcome again"
Now I need to give a space between these two lines.
This can be achieved with the "line-height" property, but it would effect other elements too.
Can anyone help me out?
Thank you.
You can use element specific line-height. So it won't affect other elements.
HTML
<span class="text">
welcome to stack over
flow and welcome again
</div>
CSS
body {
line-height:1; /*Global line height*/
}
.text {
line-height:1.5; /*Element specific line height*/
}
If the text is going to remain same then you can use break or can also use the text in two different tags. But using line-height will be better option as it will work even when text is changed.
So, this morning, for fun, I grabbed the file of unicode characters over at http://www.unicode.org/Public/6.2.0/ucd/NamesList.txt and wrote a little tiny PHP script that will output that to the screen. It takes a couple seconds to load the literally thousands of characters and render the HTML.
I tried to make a very simple grid, using inline-block divs with overflow hidden. But when I view the page in Chrome some of the boxes are shifted down or up from the rest on it's row. But only sometimes.
http://shawnsworld.ca/chars/fullunicode.php
The CSS code: http://shawnsworld.ca/chars/style.css
Any idea why Chrome would render the boxes so they are NOT in a straight row?
In Chrome, div.character has a default vertical-align of baseline.
Try removing height:100px; from div.character in your CSS. You'll see that all the boxes are sitting on the baseline of each row.
As Huangism says, changing the vertical-align to top fixes the issue.
Try adding vertical-align to your divs
div.characters {
vertical-align: top;
}
Something to compare:
http://www.unicodeblocks.com/block/Dingbats
Is this what you looking for? If yes I can give you some advice.
...other thing, there are lots of errors, in example:
<div class="character">
<span class="entity">&#x##;</span><br>
<span class="unicodeNumber">## </span><br>
<span class="name">07C0</span>
</div>
just skip any line starting with #
i have the following markup
<a class="block"><span class="inline">hello</span>world</a>
the <a> has a display:block ... if i give the span.inline a margin-top:3px it also pushes down the text after it. here is a jsfiddle to see this behaviour
http://jsfiddle.net/YLMeh/
could anybody give me a hint why this is happening?
All inline elements on a row share the same line-height. If you think about it it makes sense. What would happen when you have multiple lines of text otherwise? It would be completely unreadable.
In these situation the vertical-align attribute is what you have to work with. Read up on that and you should be fine.
margin-top: 3px; applied to your <span class="inline"> pushes the baseline down for the whole text.
understanding the vertical-align css property may help: https://developer.mozilla.org/en-US/docs/CSS/vertical-align
I'm having a little CSS problem with a list of thumbnails. Here's an example:
http://jsfiddle.net/22hs8/
The problem is that when the link is too long to fit in the 150px block it will push the image down. By using inline-block on the list elements instead of a float I could get the images to line up properly, but now I want to have the links at the same height as well.
One thing I tried is making the links itself a block (or surrounding it by a div) and giving that a height, but that would mean they are always the same height even if none of the links uses two rules. Also, if a link is so long it uses three lines the same problem would occur.
In short: how do I align the links to the top of the list items, without breaking the image alignment?
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's a way to resolve the issue entirely without also implementing one of the following methods:
Placing all of the tags in a separate
Specifying a height on the tags
Using javascript to equalize heights
Options
1. Separate Div
By moving the anchor tags into a separate div, they could be given the same width as the images and floated or displayed inline accordingly, but your markup becomes less semantic when you separate the anchor from the content (and may also be programmatically more complex if these are being dynamically generated).
2. Specifying a Height
This option can be thrown out almost immediately because, as you've stated, the anchor lengths can fluctuate to multiple lines. You could specify the height the the largest know line length, but then you'll ultimately end up with unnecessary white space with groups of short links.
3. JavaScript (jQuery)
While It would be ideal to resolve this issue without the requirement of JavaScript, I think it may be the only option that would allow you to preserve the semantics of your markup, and also apply an equal height to each of the anchor tags.
Recommended Solution
I would recommend setting a default height on the anchors of the largest known line length, then applying a bit of jQuery to normalize the heights of the anchors. This way, if the JavaScript parsing fails or JavaScript is disabled, the user still sees a uniform layout (albeit with potentially more whitespace), and with JavaScript active the heights are normalized.
Apply vertical-align:top; to the <li>
Define default height for non-js users
Equalize heights using jQuery:
(function(){
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}
$(function(){ $('li a').equalizeHeights(); });
})();
Example: http://jsfiddle.net/Eg7hy/
How is this:
http://jsfiddle.net/22hs8/3/
So you're saying that you want the links to not push the content down? I don't see that as being possible unless you don't allow your content to stretch at all. It's natural flow of a page for something above content to force the content down after it if it needs more space.
Have you thought about chopping off the text after a certain number of characters, with a '...' and providing the full text through a title, and providing the full text through a popup (since I assume you're creating some kind of photo gallery)?
The first answer that came to mind was:
"just use a table, it makes this really easy, and works everywhere"
Live Demo
However, I would probably get down voted into oblivion if I posted an answer only containing a <table> tag version, so here's a version using CSS display: table and friends:
Live Demo
Of course, that won't work in IE7 because that browser doesn't support display: table.
I can't think of a way to do this using code closer to your original and display: inline-block, which would also support an arbitrary number of lines. I'd love to see a better way to do this.
HTML:
<div id="container">
<div class="row">
<div class="cell">Some text</div>
<div class="cell">Some more text (too long)</div>
<div class="cell">Some text</div>
<div class="cell">Some text (seriously too long) text text text text text text text text text text text text text</div>
</div>
<div class="row">
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
</div>
</div>
(you could change some of those div tags into ul and li if you wanted to)
CSS:
#container {
display: table
}
.row {
display: table-row;
text-align: center
}
.cell {
display: table-cell;
width: 150px
}
.image {
width: 150px;
height: 150px;
background: grey
}
Add vertical-align:top; to the images.