Re: [css3-text-overflow] Question regarding float and text-overflow: ellipsis

On 24/04/2013 7:53 PM, Alan Gresley wrote:
> On 23/04/2013 6:59 PM, Øyvind Stenhaug wrote:
>> On Tue, 23 Apr 2013 07:54:39 +0200, Robert O'Callahan
>> <robert@ocallahan.org> wrote:
>>
>>> I think this is unspecified.
>>>
>>> I think it wouldn't be hard for us (Mozilla) to change our rendering to
>>> exclude floats when we decide where to draw the ellipsis, and that
>>> sounds
>>> reasonable. File a bugzilla bug.
>>
>> The spec says:
>>
>> "This property specifies rendering when inline content overflows its
>> block container element […]"
>>
>> If floats are to be excluded then this part should be changed. Maybe it
>> would talk about overflowing line boxes instead, I don't know.
>
> This is not really a bug with using ellipsis, inputs or floats.
>
> The input has both overflow: hidden and white-space: nowrap and this is
> causing the bug like behaviour. The reason that you can not interact
> with the input is because the line box is painted above all the other
> elements.
>
> The implementations are disagreeing over how white-space: nowrap should
> work with overflow: hidden. The test case itself is over constrained.
>
> IE10 seems do to what I would expect in such an over constrained
> situation and that is to clip the text and eclipses at the left edge of
> the input and thus allowing the input to be interacted with. Please see
> attachment showing IE10 behaviour.


I have change my mind. Firefox is handling what is a over constrained 
situation correctly. The line box (with or without eclipses) has to be 
painted over the floated input.

Alan


<html>
<head>
<style>
   div {
     overflow: hidden;
     white-space: nowrap;
     background: yellowgreen;
     margin: 20px 0;
   }

  input {
     float: right; margin: 5px;
   }

  .ellipsis {
     text-overflow: ellipsis;
   }
</style>
</head>
<body>

<div>
<input type="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.
</div>

<div class="ellipsis">
<input type="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.
</div>

</body>
</html>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 24 April 2013 10:39:47 UTC