Indenting Overflow Text

HTML & CSS
1

Is there a way to indent overflow text? For example, say I have the following:


<p style="width: 50px;height: 300px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin tellus id ligula eleifend pharetra. Etiam malesuada tincidunt mattis. Maecenas ac odio ut nisl lacinia tempor. Nam congue consectetur scelerisque. Integer nec orci ut felis consectetur mattis. Nullam faucibus erat a augue hendrerit eleifend. Aenean varius ultricies massa, vitae ullamcorper libero semper eu. Fusce aliquam blandit tortor, ac ultrices leo sollicitudin in. In ullamcorper leo vel nibh interdum gravida. Mauris consectetur, lacus vel ornare elementum, metus lorem vehicula arcu, sit amet sollicitudin magna neque id velit. Nam et lacinia leo. Mauris elementum nisl ante. Suspendisse scelerisque pretium euismod. Sed id nulla vitae mauris mollis mattis at rhoncus nisi.
</p>

Obviously, there will be overflow. Is there a way to make the overflow lines indent, maybe 15 pixels, to the right of the first line?

2

If you want the indenting to start once the width/height is achieved (dynamic situations here) then no it’s not possible.

You could indent the first line (or every line but the first) but making text indent with overflowed lines for dynamic environments (which is what I think your posting) isn’t feasible with CSS :slight_smile:

Though I’m wondering why you would want this done anyway so I’m probably misunderstanding something anyway :slight_smile:

3

Why would you paint yourself into that corner anyway? Do you have some compelling reason that I can’t imagine? Remove the height property, and let the container expand or contract vertically as needed.

cheers,

gary

4

As the others have said I’d be interested to know the reasoning behind this which might help in understanding the problem and providing a solution.:slight_smile:

Visible overflow is just - visible overflow. You can’t do anything with it except hide it or make it scroll. It can’t be addressed on its own.