• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Force span to upper-right corner of h5 element

LEGEND ,
Apr 16, 2018 Apr 16, 2018

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.

Views

477

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Apr 16, 2018 Apr 16, 2018

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,

...

Votes

Translate

Translate
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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;">&plus;</span></h5>

Then the &plus; 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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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 ).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 16, 2018 Apr 16, 2018

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 16, 2018 Apr 16, 2018

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,

^ _ ^

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 17, 2018 Apr 17, 2018

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... ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 17, 2018 Apr 17, 2018

Copy link to clipboard

Copied

LATEST

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;}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 16, 2018 Apr 16, 2018

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines