Ellipsis in the Middle of a Text (MAC Style)

Ellipsis in the middle of a text (Mac style)

In the HTML, put the full value in a custom data-* attribute like

<span data-original="your string here"></span>

Then assign load and resize event listeners to a JavaScript function which will read the original data attribute and place it in the innerHTML of your span tag. Here is an example of the ellipsis function:

function start_and_end(str) {
  if (str.length > 35) {
    return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
  }
  return str;
}

Adjust the values, or if possible, make them dynamic, if necessary for different objects. If you have users from different browsers, you can steal a reference width from a text by the same font and size elsewhere in your dom. Then interpolate to an appropriate amount of characters to use.

A tip is also to have an abbr-tag on the ... or who message to make the user be able to get a tooltip with the full string.

<abbr title="simple tool tip">something</abbr>

how to customize css ellipse for a text string

Try this:

var charAtBeginning = 10;

var charAtEnd = 7;

var myStr = "I have list of title in a drop-down as string example";

var finalOutput = "";

if (myStr.length > (charAtBeginning + charAtEnd)) {

  finalOutput = myStr.substring(0, charAtBeginning) + '..' + myStr.substring((myStr.length - charAtEnd), myStr.length);

}

alert(finalOutput);

make middle span with ellipsis without breaking icon and right number

As long as you are using inline-flex, the 100% width should work perfectly for achieving what you need:

.text {
  width: 100%;
  padding-left: 5px;
}

.right {
  width: 10%; /* remove it */
}

.right {

  float: right;

  padding: 0 8px;

}

.menu {

  width: 155px;

  border-right: 1px solid #ccc;

  list-style-type: none;

}

body {

  font-family: "Segoe UI", "Open Sans", Helvetica, Arial, sans-serif;

}

a {

  text-decoration: none

}

    .p {

     width: 155px;

      white-space: nowrap; 

      overflow: hidden;

      text-overflow: ellipsis;

      display: inline-flex;

    }

      .text {

        white-space: nowrap; 

        overflow: hidden;

        text-overflow: ellipsis;

        width: 100%;

        padding-left: 5px;

        padding-right: 16px;

      }

      .right {

        /*width: 10%;*/

      }

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<ul class="menu">

 <li class="" data-action="switchFolder" data-sign-in="false" id="inbox">

  <a href="javascript:void(0);">

            <div class="p">

      <i class="icon ion-ios-filing-outline"></i>

      <span class="text">This is a very long element that wil exceed limit</span>

      <span class="right">429</span>

            </div>

  </a>

 </li> 

</ul>

CSS text-overflow: ellipsis; not working?

text-overflow:ellipsis; only works when the following are true:

• The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
• The element must have overflow:hidden and white-space:nowrap set.

The reason you're having problems here is because the width of your a element isn't constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.

You can fix this by doing one of the following:

• Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
• Set one of its container elements to display:block and give that element a fixed width or max-width.
• Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

I'd suggest display:inline-block, since this will have the minimum collateral impact on your layout; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.

Here's a snippet with your code, with a display:inline-block added, to show how close you were.

.app a {

  height: 18px;

  width: 140px;

  padding: 0;

  overflow: hidden;

  position: relative;

  display: inline-block;

  margin: 0 5px 0 5px;

  text-align: center;

  text-decoration: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #000;

}

<div class="app">

  <a href="">Test Test Test Test Test Test</a>

</div>

With CSS, use ... for overflowed block of multi-lines

There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

There also some preformance tests.

CSS crop string in the middle

Here is a clean CSS solution using the data-* attribute and two ::after pseudo-elements. I also added an optional hover and show all text (the #fileName::after pseudo element needs to be removed when the full text is shown).

Example 1

#fileName {
  position: relative;
  width: 100px;
}

#fileName p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#fileName:after {
  content: attr(data-filetype);
  position: absolute;
  left: 100%;
  top: 0;
}

/*Show on hover*/

#fileName:hover {
  width: auto
}

#fileName:hover:after {
  display: none;
}

<div id="fileName" data-filetype="txt">
  <p>This is the big name of my file.txt</p>
</div>

Is there a way to truncate a string in the middle using CSS or JS?

With css, you can easily use ellipsis, but only at the end of the text.

However, there is a jQuery plugin called dotdotdot, which can do this.

Here's it's page: DotDotDot

One of their demo examples shows, how a long URL can be turned into

www.website.com/that/should/... /file.html

---

I spent some time trying to get this working properly, and it's still not quite perfect, but works pretty well.

// @param element    obtained with $("selector")
// @param spacer     ' ' for text, or '/' for links.
// @param position   number of words to leave at end
function doEllipsis(element, spacer, position) {
    $(element).data('ell-orig', $(element).html());
    $(element).data('ell-spacer', spacer);
    $(element).data('ell-pos', position);

    var pieces = $(element).html().split(spacer);
    if (pieces.length > 1) {

        var building = "";

        var i = 0;

        // for "position" to mean "fraction where to wrap" (eg. 0.6), use this:
        // for (; i < pieces.length*position; i++) {    

        for (; i < pieces.length-position; i++) {
            building += pieces[i] + spacer;
        }

        building += '<span class="ell">';

        for (; i < pieces.length; i++) {
            building += pieces[i] + spacer;
        }

        building += '</span>';

        $(element).html(building);

        $(element).dotdotdot({
            after: 'span.ell',
            wrap: 'letter'
        });
    }
}

// use to redraw after the size changes etc.
function updateEllipsis(element) {
    var orig = $(element).data('ell-orig');
    var spacer = $(element).data('ell-spacer');
    var pos = $(element).data('ell-pos');

    $(element).trigger("destroy");
    $(element).empty();

    $(element).html(orig);

    doEllipsis(element, spacer, pos);
}

Here's a fiddle of this example (it uses a copy hosted on my dropbox, so it's quite sure that it won't work forever).

It is responsive (to some extent, anyway), and puts the ellipsis exactly where you tell it to.

---

Related Topics