-1

how can i program a span with text that has a textbox-like behaviour?

what i exactly want is: a span with a unchangeable size, text align isleft, but ifthe text is longer than the span width, text lign changes to right,overflow is hidden.

heres what i got:

<span style="width: 250px; height: 30px; overflow:hidden;">example text</span>

of course this only makes sense if the example text is changeable somehow. is away to archieve this change of align without javascript? pure html and css?

thx

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
BigX_Jazz
  • 103
  • 3
  • 13
  • Is there a reason you can't use javascript? – br3w5 Feb 06 '13 at 13:10
  • 2
    And is it ok if you won't be able to see the text on the left once you align right? – br3w5 Feb 06 '13 at 13:12
  • 1
    this doesnt make sense, if its overflow hidden with set width, the text is never gonna be longer than span width – Toping Feb 06 '13 at 13:25
  • 1. i could use javascript, but i hoped there is a nice css solution 2.yes it is ok if i cant see the text that overflows on the left side. 3.the text is longer than the span width, you just cant see it – BigX_Jazz Feb 06 '13 at 13:49

1 Answers1

0

Spans by default are rendered as inline elements. Inline elements aren't affected by widths, heights or overflow settings. You'll need to change it to display as a block (or inline-block):

<span style="width: 250px; height: 30px; overflow:hidden; display:block;">example text</span>
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • 1
    inline are not affected by width? what are you talking about? – Toping Feb 06 '13 at 13:21
  • In what situation would float and display:inline; be used together? I'm sure by floating an element you're overriding the inline display. – James Donnelly Feb 06 '13 at 13:26
  • 1
    @Ark "When you float an element it becomes a block box" - http://css.maxdesign.com.au/floatutorial/introduction.htm – James Donnelly Feb 06 '13 at 13:27
  • exactly what a inline element is. – Toping Feb 06 '13 at 13:29
  • 1
    @Ark ... I think you're missing the point here. An inline element isn't affected by width or height - that jsFiddle example proves this. When floating an inline element you're turning the element into a block (no longer an inline element). Width and height affects the floated inline element because it is no longer treated as an inline element, but rather a floated block element. – James Donnelly Feb 06 '13 at 13:31
  • 1
    "but rather a floated block element." try to float a element with block then, now try to float right and left a inline element...they had this discussion already = http://stackoverflow.com/questions/1702669/what-is-the-difference-between-floatleft-vs-displayinline-while-every-element – Toping Feb 06 '13 at 13:34
  • @Ark I can't tell whether you're just trolling now or really still not getting this. An inline element by default (i.e. no float) is not affected by width or height. A block element is. A floated inline element is treated in the same way as a floated block element. This can be seen here: http://jsfiddle.net/KY2pF/1 – James Donnelly Feb 06 '13 at 13:41