CODEWITHSUNDEEP
htmlcss
Rob Campion
Rob Campion

Reputation: 1379

Problems with percentage based max-width when floating

Inside a div, I'm floating a span. Within that span there is a child span that sets a max-width based on percentage (using percentage as I want it to be responsive).

Problem

The floated span has a sibling span that I want to sit right beside it. However, when I use percentage max-width for the child span, the container span remains at full width (containing mostly whitespace).

Code

CSS

.ellipsis-text {
    ...
    max-width: 40%;
    ...
}

HTML

<!-- Floating span -->
<span class="pull-left">
    <!-- Child span with max-width -->
    <span class="ellipsis-text">
        ellipsis text that should cut off
    </span>
</span>
<span class="pull-left">
    second text
</span>

JSFiddle: http://jsfiddle.net/robcampo/LJqwW/6/

Solution

When I use pixels, it works, but as this should be responsive, percentages are better. Also, it works without the parent span floating, but I need this in my solution.

Is there a clean way to ensure that the parent span doesn't stretch 100%?

Upvotes: 2

Views: 1193

Answers (3)

Salman Arshad
Salman Arshad

Reputation: 272236

A floated element with unspecified width and height expands as much as its children. Percent width on children obviously will not work in this case. Here is an alternate solution which seems to work in responsive designs:

<div style="overflow: hidden;">
    <span style="float: right;">second text</span>
    <span style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">ellipsis text that should cut off</span>
</div>

Demo Here

The drawback is that the order of spans has changed.

Upvotes: 2

Exception e
Exception e

Reputation: 1874

Compare the rendering, you can clearly see that ellipsis text takes 40% from its parent.

I think you are using a broken browser at the moment.

css result rendering by Firefox 28 (Note FF 38 doesn't exist).

<!-- Problem with this row -->
<div class="row">
    <div class="col-md-12">
        <span class="pull-left">
            <span class="ellipsis-text">
                ellipsis text that should cut off
            </span>
        </span>
        <span class="pull-left snd">
            second text
        </span>
    </div>
</div>

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .ellipsis-text {
    display: inline-block;
    max-width: 40%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: middle;
}
.ellipsis-text {
    background: rgba(0, 255, 255, .25);
}
.ellipsis-text-px {
    max-width: 40px;
}
.ellipsis-text-small {
    max-width: 5%;
}
.pull-left {
    background: rgba(255, 255, 0, .25);
}
.pull-left.snd {
    background: rgba(255, 0, 0, .25);
}

Upvotes: 0

scripter
scripter

Reputation: 130

Parent span should have display to block and float to left and it must have the width size manually to handle children width sizes. child span should have display to block, float to left and the width size as percentage or px

Upvotes: 0

Related Questions