Template:Inline block

Template documentation[view] [edit] [history] [purge]

Usage

The template {{Inline block}} creates an element—by default a <span>—that has the CSS property display:inline-block. There is support for a range of common style properties as template parameters, and an all-purpose style parameter.

One intended use is to replace {{nowrap}} when coding templates with complex layout, which need to display differently on mobile and desktop. Like {{nowrap}}, it holds content together and avoids wrapping it where possible. However, if necessary, such as on small screens, the content will wrap.

Example of wrapping control

In each case the outline represents a width constraint, which might be affected by the user's screen size, other parts of the template, or both.

1 (red)=Gas3 (black)=Solid80 (green)=LiquidColor of the atomic number shows state of matter (at 0 °C and 1 atm)
1 (red)=Gas3 (black)=Solid80 (green)=LiquidColor of the atomic number shows state of matter (at 0 °C and 1 atm)
1 (red)=Gas3 (black)=Solid80 (green)=LiquidColor of the atomic number shows state of matter (at 0 °C and 1 atm)

Here, each grey box and the text "Color of ..." are wrapped in {{inline block}} templates. If {{nowrap}} had been used instead, there would be no visible difference in the first two cases. In the third case, however, the text would have been unable to wrap into the space available. On mobile, this might mean that a table or the whole article is forced to become horizontally scrollable.

TemplateData

This is the TemplateData documentation for this template used by VisualEditor and other tools; see the monthly parameter usage report for this template.

TemplateData for Inline block

The template {{Inline block}} creates an inline-block element. Among other uses, it can replace {{nowrap}} when coding templates with complex layout.
ParameterDescriptionTypeStatus
Content1
The content to be wrapped in an inline-block element
Contentoptional
Tag name2
Changes the HTML tag used. This may affect what elements this template should contain or be contained by.
Default
span
Example
div, abbr
Stringoptional
Titletitle
Title of the content (used as tooltip text, or expanded abbreviation when 2=abbr
Example
died (for abbr d.)
Stringoptional
Widthwidth
The width; passed directly to the "width" CSS attribute
Stringoptional
Heightheight
The height; passed directly to the "height" CSS attribute
Stringoptional
Text colorcolor
The text color; passed directly to the "color" CSS attribute
Stringoptional
Background formattingbackground
bg
The background formatting; passed directly to the "background" CSS attribute
Stringoptional
Other stylesstyle
Style information as plain CSS.
Stringoptional
Test of raw TemplateData output:

The template {{Inline block}} creates an inline-block element. Among other uses, it can replace {{nowrap}} when coding templates with complex layout.

Template parameters

ParameterDescriptionTypeStatus
Content1

The content to be wrapped in an inline-block element

Contentoptional
Tag name2

Changes the HTML tag used. This may affect what elements this template should contain or be contained by.

Default
span
Example
div, abbr
Stringoptional
Titletitle

Title of the content (used as tooltip text, or expanded abbreviation when 2=abbr

Default
Example
died (for abbr d.)
Stringoptional
Widthwidth

The width; passed directly to the "width" CSS attribute

Stringoptional
Heightheight

The height; passed directly to the "height" CSS attribute

Stringoptional
Text colorcolor

The text color; passed directly to the "color" CSS attribute

Stringoptional
Background formattingbackground bg

The background formatting; passed directly to the "background" CSS attribute

Stringoptional
Other stylesstyle

Style information as plain CSS.

Stringoptional

See also

  • {{nowrap}} prevents wrapping within a single template (i.e. not suitable for relatively complex or lengthy content).
  • {{nowraplinks}} ... {{nowraplinks end}} prevents wraps inside links while allowing wraps between links and in normal text. Very useful for link lists and easy to use.
  • {{nowrap begin}} ... {{nowrap end}} prevents wraps in both text and links. For the trickier wrapping cases when you need full control, for instance in very complex link lists.
  • {{avoid wrap}} prevents wraps unless the space is too narrow to display the text on one line.
    • {{inline block}} does the same and allows further style customization, but does not automatically add the "avoidwrap" CSS class.
  • {{spaces}} produces multiple non-breaking spaces (or a single one).
  • {{wrap}} can be used to provide a (brief) exception within a no-wrapping area.
    • {{normalwraplink}} allows links to wrap when they otherwise would not.
  • {{·}} and {{•}}, spaced and wrap-sensitive interpunct (dot) and bullet.
  • Help:Line-break handling, Wikipedia's how-to guide about word wrapping and line breaks.
    • In particular, to avoid line wrapping when quoting a passage such as a poem or computer code, see Template:Quote § Line breaks – e.g. Template:Blockquote with "poem" tag.