ShinyChang/React-Text-Truncate

Not truncating correctly

reintroducing opened this issue · 3 comments

I figured I'd open a new issue so as not to plug up the other one since these don't seem to be related. Anyway, my code for these three items is the same, all set to truncate after 2 lines. Here is a screenshot of the result: https://www.dropbox.com/s/gmiacy5rv1qjqdq/Screenshot%202016-06-14%2021.49.11.png?dl=0

The code:

<div className="MessagesSnapshot-item">
    <Image
        className="MessagesSnapshot-item-image"
        src="http://placehold.it/100x100"
        alt="Sender name would go here"
        round
    />
    <div className="MessagesSnapshot-item-info">
        <div className="MessagesSnapshot-item-title">
            <h3 className="heading-xs">Jen R. via SMS</h3>
            <span>3 min ago</span>
        </div>
        <TextTruncate
            className="MessagesSnapshot-item-message"
            line={2}
            text="I see by your Health Assessment that you're a very good listener and you like fruit."
        />
    </div>
</div>
<div className="MessagesSnapshot-item">
    <Image
        className="MessagesSnapshot-item-image"
        src="http://placehold.it/100x100"
        alt="Sender name would go here"
        round
    />
    <div className="MessagesSnapshot-item-info">
        <div className="MessagesSnapshot-item-title">
            <h3 className="heading-xs">Jen R. via SMS</h3>
            <span>5 min ago</span>
        </div>
        <TextTruncate
            className="MessagesSnapshot-item-message"
            line={2}
            text="Hi! I'm your expert coach, Jen. I'm excited to meet you and get started on your journey!"
        />
    </div>
</div>
<div className="MessagesSnapshot-item">
    <Image
        className="MessagesSnapshot-item-image"
        src="http://placehold.it/100x100"
        alt="Sender name would go here"
        round
    />
    <div className="MessagesSnapshot-item-info">
        <div className="MessagesSnapshot-item-title">
            <h3 className="heading-xs">Jade P. via Mail</h3>
            <span>1 hr ago</span>
        </div>
        <TextTruncate
            className="MessagesSnapshot-item-message"
            line={2}
            text="Welcome to Retrofit, Madeline! I wanted to reach out to you and talk about stuff."
        />
    </div>
</div>

This is all placeholder content obviously but you get the idea. It's not truncating correctly as you can see the second and third items are 3 sentences long, only the first is 2.

Just in case you want to see the corresponding Sass as well:

.MessagesSnapshot {
    text-align: center;
    padding-bottom: 30px;

    .Badge {
        position: relative;
        top: -4px;
    }
}

.MessagesSnapshot-item {
    display: table;
    width: 100%;
    margin-bottom: 30px;
    text-align: left;

    .LazyLoad {
        display: table-cell;
        width: 100px;
        height: 100px;
        vertical-align: top;
    }
}

.MessagesSnapshot-item-info {
    display: table-cell;
    width: calc(100% - 100px);
    padding-left: 10px;
    vertical-align: top;
}

.MessagesSnapshot-item-title {
    @extend %clearfix;
    width: 100%;

    h3 {
        float: left;
        margin-bottom: 0;
    }

    span {
        @include font-size(1.3);
        float: right;
    }
}

.MessagesSnapshot-item-message {
    @include font-size(1.2);
}

UPDATE: It's odd, sometimes when I refresh it works, sometimes it doesn't... I'm not sure what is causing this to not work, I'm just doing a page refresh. On original load (meaning not a refresh) its also intermittent. Maybe since you know the internals better than I would this will help trigger something in your mind that will get the wheels spinning on what the problem could be.

Let me know if there is anything else you'd like me to add/test to get this corrected.

If you can adding width and height for Image will be great. I guess this problem will be fixed.

DOH! disregard this comment, I forgot I took off the lazyloading so now it is not wrapped by that div.

Yep, that fixed it, sorry for wasting your time, completely my mistake :) Thank you for catching that.