I have a div which contains two lines but i want to make them show up as vertical.
This is how my div looks like
<div>
Line One <br>Line Two
</div>
Is there a way to make text orientation inside the div vertical so that it appears like
L L
I I
N N
E E
O T
N W
E O
Wrap them both in p tags, and set word-break to break-all, and the width to 1px.
A hacky solution, but one that works!
See this example, otherwise, I don't believe there is a cross-browser solution unfortunately.
in css you can rotate text. but a few different:
<div style="-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);">
Line One
</div>
Related
I'm working on a web app and am looking for a way to show a colored background around a block of text, but in the case where the text wraps onto 2 or more lines, I only want the background to extend as far as the furthest of any of the lines of text, not as far as the edge of the container, which seems to be the default behavior.
Fiddle that illustrates the problem and also what I'm looking for.
Here is the simplified issue:
<div class="outerContainer">
<div style="background:blue">
wrapped and workingasdesired
</div>
</div>
I would like a way to display this as such
*wrapped and * |
*workingasdesired * |
Where | represents the edge of the outer container, and * would be the highlighted area
However, what actually happens is that the highlighting extends all the way to the end of the outer container:
*wrapped and *|
*notworkingasdesired *|
I've searched around on Stack Overflow and also played with the fiddle for quite a while, but haven't had any luck.
A CSS-only solution would be the holy grail, but suggestions on good ways to accomplish this with JS would also be great!
I have a td assuming in the below representation [x] as a checkbox and the text is labelled next to it, if I display the label inline it appears like in Rep1, but I want it to look as displayed below like in Rep 2:
**Rep 1 :
[x] long command looks
like this which is odd
**Rep 2:
[x] would look better if
it lined up like this
Any suggestions on the easiest way to do this?
You can do that using:
1) tables:2 columns
2) float left/right in a div
3) making a text box with the text and positioning it around the td
but
You said that you got both in a td so using float with the checkbox and the div with the text in my opinion is a good solution
I have three <div>s, A, B, and C. They are all lines of text. The basic layout is:
aaaaaaaaaaaaaa ccccccccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbbbbbbbb
When the window is opened fully, the cccccccccccc can be kerned (i.e can fit) above the bbbbbbbbb and therefore I want it to do so, as illustrated above.
However, when the window is reduced in size such that either A and C can't fit on the same line, I want ccccccccccc to move below bbbbbbbbb, like this:
aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccccccccc
Therefore, I somehow need to make the default position of C to the right of A, but to make C move below B when there isn't enough space to accommodate C in its full length (and I don't want any line-wrapping).
Placing A and B together in a containing <div> and having C follow that <div> simply doesn't work, as I want C to be next to A, on the same line, in its default positioning; if I wrapped A and B into a dedicated <div> container, I'd end up with:
aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccccccc
...and that's not what I want. (I'd also likely end up with text-line wrapping of B and C, and I'm trying to avoid that.)
How can this be most efficiently accomplished?
I've Solved it...no JQuery required, just judicious styling:
<!DOCTYPE html>
<div style="float:left">AAAAAAAAAAAAAAA </div>
<div style="float:left; width:100%">BBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div style="display:inline-block; vertical-align:top">CCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
See it in action here: https://jsfiddle.net/TomJS/wj44qqe4/
simplified, i have three elements A, B and C. B and C are together in a div. if there is enough horizontal space (browser window wide enough) i want them displayed as
A B C
trivial so far. if the window gets smaller, i want them to wrap like this:
A
B C
i solved this by giving the div a style.whiteSpace = "nowrap".
the problem is, that B C now simply wont wrap any more, even if there is not enough space to display them. when the window gets even smaller, i want this to be displayed as
A
B
C
so what i am looking for is kind of a softer version of 'nowrap' which prevents wrapping if there is room to evade to, but allows wrapping if not.
EDIT:
a reply solved the above by making everything float: http://jsfiddle.net/nF4k5/6/
this made me realize that my simplification went too far. actually in my application A is a text and has wrapping in itself, so will sometimes fill the whole width. B and C can be imagined as single words that should appear
a) together in the last line of text A or if they wont fit there together
b) on a new line or if that line is too short
c) on two lines.
i made an example to play around with: http://jsfiddle.net/nF4k5/5/
ever smaller screens should result in:
A A A A B C
A A A A
B C
A A A
A B C
A A
A A
B C
A
A
A
A
B
C
it would be especially nice if the solution didnt involve making changes to A, like my adding of nowrap to the div around B C, which doesnt work.
EDIT:
solution: instead of giving the wrapper of B and C a whiteSpace="nowrap" i give it a display="inline-block".
put A in div X , B and C in Y. Float X and Y to left.
Whenever width is smaller than width of X+Y, Y will go down.
Inside Y : put B in div sonOfX, put C in sonOfY, Float sonOfX and sonOfY to left.
Whenever width is smaller than width of sonOfX+sonOfY , sonOfY will go down.
here you go - http://jsfiddle.net/nF4k5/
This should do it: http://jsfiddle.net/nF4k5/7/ for your new question
Since you said these are elements, I'm assuming you mean HTML elements, right? If that's the case, just float them. That's the natural behavior of floats.
I have an HTML table (populated from a datatable on server side), with no styling except background color, and for some reason it breaks some of the lines.
Is there any CSS behavior that dictates this? I tried to replicate it with a table populated with a random string of "M "s, and it also broke the line after every space...
EDIT:
What's happening:
|M|M|
|M|M|
|M|M|
What's supposed to happen:
|M M M |M M M |
Thanks!
I think you mean the NOWRAP option.
<table><tr><td NOWRAP>Text</td></tr></table>