Question

I’m adjusting the width of a div element, but the <li> contents inside wraps with the width adjustment and does not overflow. I want the texts to not wrap, but instead to overflow whenever the width becomes smaller.

Is there a property that sets contents behavior like this?

This is my CSS:

.contactPanel{ //the div container
    z-index: 2;
    left: 660px;
    top: -650px; 
    position: relative;
    width: 0px;
    padding-left: 10px;
    overflow: hidden;
}
.contactPanel ul{ 
    margin: 0; 
    padding: 0px;
    list-style: none; 
    overflow: hidden;
}

Answer 1

You need to nest one DIV inside:

<div class="wrapper">
    <div class="inner">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non lacinia quam. Etiam neque elit, ullamcorper vel consectetur quis, tristique et elit. Proin facilisis purus ut velit dapibus luctus. Sed semper vestibulum metus, id adipiscing lectus malesuada in. Mauris vel turpis sem, eu suscipit arcu. Sed faucibus laoreet nisi, at elementum justo eleifend ut. In hac habitasse platea dictumst. Nunc nec ligula nibh, a varius massa.
    </div>

</div> 

css:

.wrapper {
    width:400px;
    border:1px solid #ff0000;
    overflow:hidden
}

.inner {
    width:500px;
    border:1px solid #0000ff
}