Copy link to clipboard
Copied
Hello, all,
How does one force a span to occupy the upper-right corner of a containing div, and force text inside the div to wrap around it?
I'm developing a blog for internal use, and I'm using a + to indicate to the user that clicking on the div will expand the title to include the full text of the post. I'd like for it to stay in the upper-right corner. If the title is way long (like 100+ characters), I want the + to stay in the corner and the text to line feed before it reaches the +. How is this accomplished?
V/r,
^ _ ^
CORRECTION: The span is contained within an H5 element, not a div as I originally reported.
I don't mind, at all. I've never heard of css exclusions (I'm a database and back-end OOP guy), so I might learn something.
Actually, I tripped across a solution. It may not be THE solution, but it works. I place the <span> BEFORE the text, and float: right; the span. It appears, first, on the right at the top, then the text (which floats default, ie 'left'), which is on the same z-index, line breaks before it gets to the <span>.
As I stated, probably not the best way to do it, but it works,
...Copy link to clipboard
Copied
The simplest way would be to float the span.
If you are using flexbox, you could also align-content: flex-end
Copy link to clipboard
Copied
Hi, pziecina,
I did try that. But if I have something like so:
<h5 style="width: 98%;">This is a really long title for a blog entry and it doesn't need to be this long but I'm testing something so please bear with me. <span style="float: right;">+</span></h5>
Then the + just goes to the end of the text on the next line, and looks like:
_______________________________________________________________
| This is a really long title for a blog entry and it doesn't need to be this long |
| but I'm testing something so please bear with me. + |
Is there a way to force it to the top?
V/r,
^ _ ^
Copy link to clipboard
Copied
Have you tried using margin and padding to move the + up to the top, and 'wrap' the text arround it.
Very off topic, but this would be easy if all browsers supported css exclussions, (as I said very off topic, hope you don't mind ).
Copy link to clipboard
Copied
I don't mind, at all. I've never heard of css exclusions (I'm a database and back-end OOP guy), so I might learn something.
Actually, I tripped across a solution. It may not be THE solution, but it works. I place the <span> BEFORE the text, and float: right; the span. It appears, first, on the right at the top, then the text (which floats default, ie 'left'), which is on the same z-index, line breaks before it gets to the <span>.
As I stated, probably not the best way to do it, but it works, for me.
Thank you for your suggestions.
V/r,
^ _ ^
Copy link to clipboard
Copied
Whatever works .
For future reference, you may wish to consider the html5 detail/summary element for such usage -
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
MS Edge and IE do not support the element, but it is planned for inclusion in Edge some time this year.
Copy link to clipboard
Copied
That is pretty awesome! Can't wait for it to see full browser support. That would make things easier, for sure.
Meanwhile, I'm content with the way I've got it for the blog. I assume that Bootstrap is fully supported, and I'm pretty sure jQuery is. (Are you aware of any browsers that do not support Bootstrap v4?)
V/r,
^ _ ^
Copy link to clipboard
Copied
IE10 and below, browsers before 2013 and x-box 360/PS3 prior to the early 2013 update.
There is also a long list of smart tv's, built before those dates.
IE 10 does support flexbox, but it requires the -ms- prefix and was an earlier version of the spec. If you run your css through a css autoprefixer then IE 10 will work with flexbox.
Copy link to clipboard
Copied
WolfShade wrote
(Are you aware of any browsers that do not support Bootstrap v4?)
Yes. According to the documentation, BS v4 dropped IE8, IE9, and iOS 6 support. For sites needing either of those, use v3.
Copy link to clipboard
Copied
iOS1-6, and Android v2-4, did support flexbox, but it was the very first draft specs, and only Android v2.4 supported a very early attempt at multi-line support, (flex wrap), which was limited to the first flex container and its child elements.
However for smartphones and tablet devices in portrait orientation, the use of the equivalent of column worked very well for most layouts. iOS 1 had very basic pre 'first draft' support only.
As for tablet devices in landscape orientation, this required the use of multiple small div's, often only having 2 or 3 child flex elements.
If support for these older devices is required, then snippets usage is a must, but the extra code required is very small.
Copy link to clipboard
Copied
pziecina wrote
If support for these older devices is required, then snippets usage is a must, but the extra code required is very small.
Thankfully, for the project that I'm working on, tablets are not a consideration, nor mobile phones. This could change, but I will cross that bridge (or my replacement will) if/when that time comes.
Thank you,
^ _ ^
Copy link to clipboard
Copied
Paula is right with exclusion, I would prefer grids... but if you need a larger scope of browser why don't you use TABLE... ?
Copy link to clipboard
Copied
youps the code didn't paste...
HTML
<h5>This is a really long title for a blog entry and it doesn't need to be this long but I'm testing something so please bear with me. <span>+</span></h5>
CSS
h5 {display:table-row;}h5 span {display:table-cell;}
Copy link to clipboard
Copied
if someone use an old version of IE, there is a message on my website saying, perhaps, it can't see the site