CODEWITHSUNDEEP
htmlcsscheckboxtext
omglolgg
omglolgg

Reputation: 135

CSS: display a long string line-line with checkbox

I have a string with 255 characters (no space) and want to display it inline with a checkbox, not under. I have tried inline; inline-block; ... but it doesn't work. Anyone help?

<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- 255 characters string here -->
    <label for="b">eyDlDLuT8A8AMTeyHSBXj4BeiWefQc1KWilxVWe7m7Vja1m9eEDc8iJ778jvaR2pCN2PcPcIWexrHehXSPJGqWaiSWfqSZL3AuZfOB0U3hlOCQMFWmqHWsERpWrF5YynmiJnn5mZoUP9TDPjW379O38BuBH9Q5zYlIRWgxAskcFT4DJAejiiIeu78jt1jsUU90RqV499IigZSqluOaJY3sptm0qADxE5M1JmnfEB9a8v7yihlrDq3Yy1MVMofBF</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>

Upvotes: 1

Views: 197

Answers (2)

Dustin S
Dustin S

Reputation: 80

You can use the CSS property white-space: nowrap in a span that contains both the checkbox and the string. See here on Fiddle: https://fiddle.jshell.net/aa8j1tu5/

Upvotes: 1

Jeremy Maxwell Castillo
Jeremy Maxwell Castillo

Reputation: 124

I believe you're looking for the white-space nowrap CSS property.

.item {
    white-space: nowrap;
}

Or with inline CSS:

<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item" style="white-space: nowrap">
   <input type="checkbox" id="b">
<!-- 255 characters string here -->
    <label for="b">eyDlDLuT8A8AMTeyHSBXj4BeiWefQc1KWilxVWe7m7Vja1m9eEDc8iJ778jvaR2pCN2PcPcIWexrHehXSPJGqWaiSWfqSZL3AuZfOB0U3hlOCQMFWmqHWsERpWrF5YynmiJnn5mZoUP9TDPjW379O38BuBH9Q5zYlIRWgxAskcFT4DJAejiiIeu78jt1jsUU90RqV499IigZSqluOaJY3sptm0qADxE5M1JmnfEB9a8v7yihlrDq3Yy1MVMofBF</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>

Upvotes: 2

Related Questions