CODEWITHSUNDEEP
javascriptcssvue.js
nurdunertu
nurdunertu

Reputation: 23

How to split vuetify-text-field-label over 2 lines

I have a vuetify text field. The label is too long for mobile devices. Is it possible to automatically wrap the text. I tried using div and p, like so (link on codepen)

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-text-field>
          <template v-slot:label>
            <div><p>First line of text.</p></div><div><p>Second line of text</p></div>
          </template>
        </v-text-field>
      </v-container>
    </v-form>
  </v-app>
</div>

Upvotes: 2

Views: 1795

Answers (2)

Ivan Shulev
Ivan Shulev

Reputation: 566

If the information is necessary, I would use a hint. Google material design suggests that multi-line or long labels are bad practices: enter image description here

Upvotes: 1

Timothy Alexis Vass
Timothy Alexis Vass

Reputation: 2705

You can use <span> elements with display: inline-block.

@keyframes example {
  0% {width: 310px;}
  50% {width: 290px;}
  100% {width: 310px;}
}

#wrapper {
  word-wrap: normal;
  padding: 0 10px;
  border: 1px solid #ccc;
  animation-name: example;
  animation-duration: 5s;
    animation-timing-function: sine;
    animation-iteration-count: infinite;
}

.sentence {
  display: inline-block;
}
<div id="wrapper">
  <p><span class="sentence">First line of text.</span> <span class="sentence">Second line of text.</span></p>
</div>

Upvotes: 1

Related Questions