CODEWITHSUNDEEP
htmlcss
lukkysam
lukkysam

Reputation: 188

How to place 2 spans beside each other with full width with CSS

in my custom file manager I want to show truncated filenames. It's important to see the beginning and the ending, so just overflow:ellipsisdoesn't do the work.

The tiles where the filename is shown can change their width (inside bootstrap columns). They are rendered with handlebars, so I can manipulate the String before it's rendered (witch a helper). After that, I don't want to use javascript anymore (e.g. eventlisteners which listen to resize)

My Idea: Splitting the string of the filename (regex) while the tile is rendered. So "long_filename_with_number_at_the_end_001.jpg" becomes ["long_filename_with_number_at_the_end_","001.jpg"].

Now I want to include these strings in two spans inside a parent div, while the right span is as large as needed. and the left span fills the rest. The left span shall get the text-overflow:ellipsis property.

I found this answer, which is quite near to mine. I changed a little bit, but I did't get what I expected.

* {
    position: relaitve;
}
.outer {
    width: 110px;
    height: 22px;
    border: 1px solid #ccc;
}
#colA {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background:yellow;
}
#colB {
    float:right;
    background: pink;
}
<div class="outer">
    <div id="colA">long_filename_foo_bar</div>
    <div id="colB">001.jpg</div>
</div>

Upvotes: 0

Views: 269

Answers (2)

Philip Dernovoy
Philip Dernovoy

Reputation: 1179

Flex based solution:

.filename {
    display: flex;
}
.filename .start {
    flex-shrink: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.filename .finish {
    flex-shrink: 0;
}

/* decorations */
.column {
    width: 150px;
    border: 1px solid #666;
    overflow: hidden;
}
.filename:hover {
    display: flex;
    background: #ddd;
}
<div class="column">
    <div class="filename">
        <div class="start">long_filename_foo_bar_</div>
        <div class="finish">001.jpg</div>
    </div>  
    <div class="filename">
        <div class="start">long_filename_foo_bar_</div>
        <div class="finish">123001.jpg</div>
    </div>
    <div class="filename">
        <div class="start">short_</div>
        <div class="finish">001.jpg</div>
    </div>
</div>

Upvotes: 1

SKeurentjes
SKeurentjes

Reputation: 1878

Just switch #colA and #colB in your html document.

<div class="outer">
    <div id="colB">001.jpg</div>
    <div id="colA">long_filename_foo_bar</div>
</div>

JSFiddle: http://jsfiddle.net/skeurentjes/0nam7L2q/

Upvotes: 2

Related Questions