How can i ensure the paragraph have fixed number of characters with CSS?

Question

For example, i want exact 9 characters (with no extra chars/whitespaces) in the text paragraph below with CSS. (i set width to 9rem, fontsize to 1rem below)

Tried letter-spacing, inline-block, monospace font etc without luck.

.texts {
  display: inline-block;
  width: 9rem;
  font-size: 1rem;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid palevioletred;
  padding: 0;
  line-height: 1;
  letter-spacing: 0;
}

<p class='texts'>ninechars with extra chars</p>

If you use `display: inline-block` the width will fit the content. Is that what's desired? — arbuthnott, Jan 31 '18 at 17:19
@arbuthnott thanks for your advice, sorry for my poor description of problem. Seems there's an answer does what i want, just need to confirm it. — Allen, Jan 31 '18 at 17:31

score 2 · Accepted Answer · answered Jan 31 '18 at 17:19

2

Yes you can achieve what you're after using the code below

p.texts { overflow: hidden; max-width: 9ch; }

<p class='texts'>ninechars</p>

And you can check the compatibility here - https://caniuse.com/#search=ch

answered Jan 31 '18 at 17:19

Andy Holmes

7,817
10
50
83

AsankaJ · Answer 2 · 2018-01-31T17:33:40.343

1

   <style> 
   #para1 {
        white-space: nowrap; 
        max-width: 9ch;
        overflow: hidden;
        text-overflow: ellipsis; 
        border: 1px solid #000000;
    }
    </style>

    <p id="para1">Lorem ipsum dolor sit amet, consectetur adipiscing </p>

edited Jan 31 '18 at 17:33

answered Jan 31 '18 at 17:28

AsankaJ

82
7

How can i ensure the paragraph have fixed number of characters with CSS?

2 Answers2