0

Maybe a silly question, but I am trying to understand some code that just writes text on screen, on an xhtml document. The text is wrapped with span tags and each word is exactly positioned on the screen using something like:

<span id="textID1" style="position:absolute; width:46px; min-width:46px; left:60px; height:22px; min-height:22px; top:90px;" >Hello</span>

My question is whether setting width equal to min-width (and also height equal to min-height) is just redundant and I could go with just one of them?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
XAnguera
  • 1,157
  • 1
  • 11
  • 25

3 Answers3

1

Consider the following:

1. higher value in min-width:

width: 46px;
min-width: 50px;/*this would be the element width rendered by browser*/

2. higher value in width:

width: 50px; /*this would be the element width rendered by browser*/
min-width: 46px;

So, whichever is higher value that would work as the value for the width.

But you have equal value in both width and min-width you can use just width.

And of-course this applies the same for height and min-height.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
1

Settin min-width to the same value as width is redundant in the sense that if there are no other style sheets affecting the element, the min-width setting has no effect.

But it is not redundant in general. Some other style sheet (in theory, even a user style sheet) may set the width property to some other value. In that case, the min-width property, when set, prevents the used value of width from becoming smaller than the min-width value.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

There are several things to say but I'll cut short to the straight answer:

just set width and don't set any of the others.

Short explanation:

A span has a default flow of inline. Set it with display: block or get rid of the span in favor of a div. I'd recommend that last choice.

Now, on the div, you can set height (don't set min-height).

On another note: don't set minimum values at all and use CSS classes instead of inline-styling whenever you can.

EDIT:

If you need to handle overflowing text better you MIGHT want to look into

text-overflow: ellipsis;

This only works on CSS3 capable browsers!

pid
  • 11,472
  • 6
  • 34
  • 63
  • OP has absolutely positioned the element meaning that don't need to apply display block... – Bhojendra Rauniyar Aug 22 '14 at 11:59
  • Yes I know, but I want him to realize that he really wants a `div`. Using a `span` this way feels like an abuse. – pid Aug 22 '14 at 12:01
  • 1
    Actually, setting width to 100% and then setting a min-width is a nice way to make your site scalable quickly... Don't set any others is very.. limiting. – somethinghere Aug 22 '14 at 12:02
  • @pid I want to exactly position each word in a text, for this reason I need to use span(or div) around each one. – XAnguera Aug 22 '14 at 12:10
  • But the idea of span is that you let it *flow* in the text without impeding its development. Those tags have an inherent semantic in HTML: http://stackoverflow.com/a/1611079/3227403 – pid Aug 22 '14 at 12:12
  • Thanks @pid reading the answe in the link I see that I need to use span, as I do have all text inside

    blocks

     – XAnguera Aug 22 '14 at 12:38
  • Ok, I beg your pardon if I was misleading you :) I had no intention to waste your time. – pid Aug 22 '14 at 12:41
  • No problem @pid, I thank you for your help, I definitely learned something. – XAnguera Aug 22 '14 at 14:46