CODEWITHSUNDEEP
htmlcss
prashn64
prashn64

Reputation: 657

Putting an element directly after text that may/may not be truncated

So I want something like this:

Hello [element]

but also this case:

Hello blahblahblah... [element]

floating the element right does this, which I do not want:

Hello                 [element]
Hello blahblahblah... [element]

EDIT:

the html I tried was this:

<h3 id="container">
  <span>[element]</span>
  <a>dynamic text</a>
</h3>

css:

span{
  float: right;
}

#container {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Another problem is [element] could be of variable length. I want to truncate the a tag so that it fits all of [element] and put it all on one line. I know that might've just made the question much harder...

EDIT 2:

Realized it wasn't clear that I want the container h3 to be of fixed max width. So basically if the a tag and span's combined width is greater than that max width, the span will put the truncation location to the left. Like so:

the string is: Hello World

So it could look like this in that case:

Hello Worl...[small el]

Hell...[bigger span el]

Ideas?

Upvotes: 0

Views: 263

Answers (1)

ScottS
ScottS

Reputation: 72271

Updated Idea

This is a refined version of my original idea below, but attempts to create your fixed width of container and general look that you mentioned in the chat using an extra wrapping div. The only way I see that this could work purely by css is for you to know before hand what your maximum width of your "badge" area could be, and then set your max-width of the text area to be the width of the container minus that potential maximum width of the badge area. Here is the revised code below and fiddle example, where I am assuming a 200px container, with a maximum of 100px badge area width. You will end up with some of the text being cut off "prematurely" (as in, it would appear that it could go wider, but we are limiting it to a certain space; see the third line in the fiddle).

HTML

<h3 class="container">
  <div>   
  <span>[elem]</span>
  <a>dynamic text</a>
  </div>
</h3>

CSS

.container {
  width: 200px; /* this defines your right edge */
  background-color: cyan;
  overflow: hidden;
}

.container > div {
  float: left;
  clear: left;
  position: relative;
  padding-right: .1em;
  white-space: nowrap;
}

.container span {
  position: absolute;
  left: 100%;
  white-space: nowrap;
}

.container a {
  display: block; 
    /* the following assumes the span "badge" area is 100px max, 
       so it is 200px - 100px = 100px in width */ 
  max-width: 100px;  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   
}

Original Idea

Perhaps this would work.

.container {
  float: left; /* this collapses the container around the 'a' tag */
  position: relative; /* this is going to position the 'span' */
  padding-right: .1em; /* gap to element 'span' */
  white-space: nowrap; 
}

.container span {
  position: absolute;
  left: 100%; /* push behind 'a' tag */
  white-space: nowrap; /* keep this from wrapping */
}

.container a {
  display: block;
  max-width: 100px; /* set your max width for the 'a' tag only */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   
}

See a fiddle example.

Upvotes: 3

Related Questions