Make part of sentence with ellipsis in case that length of sentence is more than two lines

Question

I have a sentence that contains job title and location, and I have a limitation of two lines for writing the whole sentence.

The maximum length of the location is 30 characters, but the maximum length of the job title is unknown.

In order to achieve it, I need to make the job title more shorter (with dot dot dot).

These examples work fine:

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

But these examples don't work:

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

The job should be replaced with "Sales Manager and ..."

By this way, the sentence will be exactly two rows.

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

The job should be replaced with "Sales Manager..."

By this way, the sentence will be exactly two rows.

This is my css:

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.ellipsis { /* dot dot dot */
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
}

And these are my snippest (I have created the same snippest in two platforms):

1) http://jsfiddle.net/Ht6Ym/3734/

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.ellipsis { /* dot dot dot */
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
}

<div style="color:red;">It works:</div>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

<div>--------------------------</div>

<div style="color:red;">It doesn't work:</div>
<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

Any help appreciated!

ids must be unique, change them into classes in your HTML and CSS. You'll see the borders of the containers if you correct your typo:`boder: 1px solid black;` — zer00ne, Mar 26 '16 at 09:02
I know, I will have only one container div in my page.. I wrote four divs just for the examples.. thanks.. — Alon Shmiel, Mar 26 '16 at 13:07

smdsgn · Accepted Answer · 2016-03-28T08:36:39.427

2

If you set a text-overflow : ellipsis property on your span .ellipsis, you need to set the width of this span.
See this example :

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.ellipsis { /* dot dot dot */
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
  width:105px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid green;
}

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<div>----------------</div>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span><span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

edited Mar 28 '16 at 08:36

answered Mar 26 '16 at 08:10

smdsgn

1,736
1
11
11

It looks very good except there are "two" spaces between the job title and the word: "jobs". It happens because the inline-block. I've tried to replace the display with some others attributes, but with no success.. There is something else that we can do? Thank you! – Alon Shmiel Mar 26 '16 at 13:32
1

You right, the inline-block attribute create a white-space. To prevent this you can put the two spans on the same line. – smdsgn Mar 26 '16 at 13:51
Yes, but then there is no space between dot dot dot and "jobs". For example: "Sales Manager and driver" and location: "san francisco, california, usa". The whole sentence is: "Find more Sales Manag...jobs in san francisco, california, usa". There is something to do with that? I have tried what you suggested: span with id=job and the other span will be in the same line. – Alon Shmiel Mar 26 '16 at 20:40
1

unfortunately I don't think you can control the "extra space" who is part of the ellipsis suffix. See my updated answer to visualize the "extra space". It's not "two" spaces like you said. – smdsgn Mar 28 '16 at 08:37

score 1 · Answer 2 · edited May 23 '17 at 11:59

To fix

Set an explicit width on the <span> wrapping the job title.
Set display to inline-block for the span.
Set vertical-align to top for the span... by default this is set to baseline, which is not what you want in this case. See this thread for more info.

More information

In order for text-overflow: ellipsis to work as expected, you need the text to be overflowing its container. Currently, the <span> will adapt its width to whatever text is inside it, so there will never be a situation where the text overflows outside the element.

Simply setting a width on the span, however, will have no effect, as <span> elements are by default inline elements, which have no width. By also setting display: inline-block on the <span>, the content inside the element will get treated as block (which can have a width) while the element itself will still be inline (see here for more info on the display property).

It sounds like you know the maximum length that the job title should be so that should be fine; if there were more variables involved, you might have to calculate the desired width and set it in JavaScript.

Example

I've condensed the code snippet to show this in action.

.job-title {
  display: inline-block;
  vertical-align: top;
  width: 80px;
  white-space: nowrap; 
  text-overflow: ellipsis;
  overflow: hidden;
}

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

<div id="container">Find more <span class="job-title">Long professional title</span> jobs in <span class="location">San Francisco, California, USA.</span>
</div>

Thank you.. I tested it and it doesn't work for a case of: "sales manager". and location is: "San Francisco, ca". This sentece can be entered in two lines.. — Alon Shmiel, Mar 26 '16 at 13:30

score -1 · Answer 3 · answered Mar 26 '16 at 08:33

You can create a class for the two span elements and give it display:inline and delete the styling for the .ellipsis class like I did in the following.

#container {
  width:208px;
  boder: 1px solid black;
  height: 2em; /* two lines limit */
  line-height: 1em; /* two lines limit */
  overflow: hidden; /* two lines limit */
}

.job {
  display: inline;
}

<div style="color:red;">It works:</div>

<div id="container">
  <span class="job">Find more</span>
  <span id="job" class="ellipsis job">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

<div>--------------------------</div>

<div style="color:red;">It doesn't work:</div>
<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, california, usa</span>
</div>

<br>

<div id="container">
  <span>Find more</span>
  <span id="job" class="ellipsis">Sales Manager and driver</span>
  <span>jobs in </span>
  <span id="location">san francisco, ca</span>
</div>

This doesn't answer the question! `` elements are `inline` by default and there is no truncation in your example. — Steve Harrison, Mar 26 '16 at 09:17

Make part of sentence with ellipsis in case that length of sentence is more than two lines

3 Answers3

To fix

More information

Example