skmasq skmasq -4 years ago 63
CSS Question

Get text content width in parent with overflow hidden

I'm trying to have a similar functionality as Excel double clicking the column re-sizer and expanding particular column to max width of content in that column.

Problem: I don't know how to get text content width inside div with overflow hidden and text-overflow ellipsis. And I'm not sure what tricks I need to apply for this to work. I never tried something like this.

Current HTML markup:

<div style="width: @manuallySetWidthInPx">text</div>

Current CSS:

position: relative;
min-width: 50px;
float: left;
padding: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

How I need to re-factor
<div />
and css to get inner text content actual width?

I'm ok with using

Note: I'm trying to achieve this while keeping text-ellipsis, so if I need to clone that row I'm good with that.

Answer Source

I make a DIV and place it off screen with the following CSS

    width: auto !important;
    top: -100px;


<div id = "one">

<div id = "two">


Then using the following JavaScript to transfer the text of the shown DIV to the hidden DIV and grab the hidden DIV's width.

$(document).on("click", "#one", function(){
    var value = $("#one").text();
    var div_width = $("#two").width();

Fiddle here

Depending on the context you use the above JavaScript code, there could be some performance issues. I don't see any problems with running a loop for 200 iterations though

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download