CODEWITHSUNDEEP
cssvue.js
Rbex
Rbex

Reputation: 1539

Vue.js Dynamic Value Word Wrap

I don't know how to word-wrap this dynamic value that I inserted.

My code:

  <p style="width: 200px; word-wrap: break-word">
            <strong>Balance Name:</strong>
            {{ props.row.balance }}
          </p>

As you can see the balance name overlap the div.

https://gyazo.com/ec963664480742e94499f41ee575ab28

Example snippet but the problem does not appear here

* { box-sizing: inherit; }
p { margin: 0 0 16px; }
<p style="width: 200px; word-wrap: break-word">
  <strong>Balance Name:</strong>
  ITTS NEW ENROLLMENT AND TUITION FEE 2ND SEM 2019-2020
</p>

Upvotes: 1

Views: 2714

Answers (1)

Syed
Syed

Reputation: 16513

I believer, currently there is this property applied by the style library that you are using:

white-space: nowrap;

if it's true then you can try removing word-wrap: break-word and just do like this:

<p style="width: 200px; white-space: normal;">
  <strong>Balance Name:</strong>
  {{ props.row.balance }}
</p>

Upvotes: 4

Related Questions