Indenting Multiline Labels

Indenting multiline labels

label {
    display: block;
    margin-left: 20px;
}
input {
    float: left;
    margin-left: -20px;
    margin-right: 7px;
}

Here's the fiddle: http://jsfiddle.net/hrfmt/ . Play with the values.

EDIT:

If all the browsers you need to support can understand display: inline-block, use that instead of float.

Aligning multiple lines of text with label, with same indentation

You can use display: table; and display: table-cell;

.item { display: table;}
.label {  display: table-cell;}
.text {  display: table-cell;}

<div class="item">  <div class="label">Label:</div>  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div></div>

How Can I indent only first line of multiline UILabel in iOS?

@DavidCaunt suggestion worked for me. I am sharing code here.

NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
style.firstLineHeadIndent = 50;

[attributedText addAttribute:NSParagraphStyleAttributeName value:style range:range];

[valueLabel setAttributedText:attributedText];

ggplot2 multiline title, different indentations

Update: Since ggplot2 3.0.0 there is now native support for plot labels, see this answer.

Here is how I would do it, using the cowplot package that I wrote specifically for this purpose. Note that you get a clean theme as a bonus.

library(cowplot)

p <- ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width, color = Species, shape = Species)) +
  geom_jitter(size = 3.5) +
  ggtitle("The Actual Long, Normal Title of Titliness")

# add one label to one plot
ggdraw(p) + draw_plot_label("A")

# place multiple plots into a grid, with labels
plot_grid(p, p, p, p, labels = "AUTO")

You then want to use the save_plot function to save plots instead of ggsave, because save_plot has defaults and parameters that help you get the scaling right relative to the theme, in particular for plots in a grid.

Indenting multi-line list items in an enumeration

As ErikYou suggests, one normally would nest an enumerated list within an enumerated list to get this effect. However, in your case, this would in effect start a new list with its own counter. So, I would suggest you use the IndentedEnumerate environment defined below which starts the nested list so that its enumeration continues on from the previous list and yields:

Notes:

• This is only set up for one level of nesting -- It will need further enhancements if more than one level of nesting if desired.
• If the first item is to be indented, you need to add \item[] before starting the IndentedEnumerate environment.
• If you wish this to work without the enumitem package package, the only tweaks necessary should be to modify how the label is specified for the indented list.
• The showframe package was used just to show the page margins.

Code:

\documentclass{article}
\usepackage{showframe}
\usepackage{enumitem}

\newcounter{ListStartCount}%
\newenvironment{IndentedEnumerate}[1][]{%
    \setcounter{ListStartCount}{\theenumi}%
    \stepcounter{ListStartCount}%
    \begin{enumerate}[start=\theListStartCount,label={\arabic*.},#1]%
}{%
    \setcounter{enumi}{\theListStartCount}%
    \end{enumerate}%
}%

\begin{document}
\begin{enumerate}
\item[]
\begin{IndentedEnumerate}
\item This is the frist item with indentation, so need \verb|\item[]| before this.
\end{IndentedEnumerate} 
\item This is a normal item without any indentation.
%
\begin{IndentedEnumerate}
\item This is an indented item with a long text that causes a line break. Now, the enumeration is continued and the new line is indented. 
\end{IndentedEnumerate} 
%
\item This is a normal item without any indentation.
\end{enumerate} 
\end{document}

how to achieve multi line label with react Material UI

It's an old question, but I see nobody has answered it yet.

In order to get multi line and multi styles for your tab label, you need to place your labels and values in two different items. (make sure you wrap them in a div first)

The preferred way in MUI @1.0.0 is to use the <Typography /> tag.

Check out the typography docs for all the variants.

So it would look something like this:

<Tab
   value={this.state.value}
   label={
      <div>
        <Typography variant="caption">
          Following
        </Typography>
        <Typography variant="title">
          58
        </Typography>
      </div>
   }
 />

However since all your tabs need that, you should probably create a function to take care of that.

I have created a sandbox based on the MUI example provided here: https://codesandbox.io/s/vw6107rv3

---

Related Topics