Adds ... to too long lis.

ellipsisul.js

$.fn.ellipsisUl = function() {
    var sum = function(array, selector) {
            var sum = 0;
            array.each(function(i, e) {
                sum += selector($(e));
            });
            return sum;
        },
        paddingLeft = function(e) {
            return Number(e.css("padding-left").replace("px", ""));
        };
    
    $(this).each(function(i, ul) {
        $("a", ul).each(function(i, a) {
            var its = $(a),
                orgWidth = its.width(),
                uls = its.parents("ul"),
                max = uls.width(),
                pad = sum(uls, paddingLeft),
                padMore = 30,
                newWidth = max - pad - padMore;
            
            if (orgWidth > max - pad - padMore) {
                its.width(newWidth);
                its.after($("<span>...</span>"));
            }
        });
    });
};

usage.css

ul {
    width: 150px;
    overflow: hidden;
    border: 1px solid gray;
    padding-left: 0px;
    position: relative;
    display: block;
    margin: 0px;
}

ul ul {
    padding-left: 20px;
}

a {
    display: inline-block;
    background-color: pink;
    overflow: hidden;
    white-space: nowrap;
}

usage.html

<ul class="ellipsisUl">
    <li>
        <a href="#">blablablablablablablaasdf asdf asdf </a>
        <ul>
            <li>
                <a href="#">lakjsdf ølaksjd følkajs df</a>
            </li>
            <li>
                 <a href="#">lakjsdf</a>
            </li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
    $(".ellipsisUl").ellipsisUl();
</script>