How to Restrict Character Limit by Line or # of Characters with CSS

How to restrict character limit by line or # of characters with css?

You can try text-overflow, however it has some restrictions, but still might suite you:

Example

<div id="container">
    This is some short content to demonstrate the css-property
    text-overflow
</div>​

#container{
    width:100px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;   
}​

Limit characters displayed in span

Here's an example of using text-overflow:

.text {  display: block;  width: 100px;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}

<span class="text">Hello world this is a long sentence</span>

Limiting the number of characters per line with CSS

You can set the width of the p to as much as 30 characters and next letters will automatically come down but again this won't be that accurate and will vary if the characters are in capital. Just see this example:

p {
  max-width: 30ch;
}

Limiting the number of characters per line in css

If I understood you properly, you can use word-wrap property like this:

.example-wrapper {
  background-color: red;
  max-width: 100px;
  word-wrap: break-word;
}

.example {
  max-width: 100px;
  white-space: normal;
}

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

Limiting the number of characters per line

You can use the truncate method. An example:

truncate("Once upon a time in a world far far away", length: 17)
# => "Once upon a ti..."

Read more here: http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-truncate

With your example it would be something like this:

<div class='example-wrapper'>
  <div class='example'>
    <%= trucate(simple_format(@user.content), length: 50)  %>
  </div>
</div>

How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?

jsFiddle

First, set maxlength like: <input type="text" id="txtbxSSNOrITIN" maxlength="5">

$(document).on("change", '[id$=ckbxEmp]', function () {

    var ckd = this.checked;                        // ckd is now a boolean 
    $('[id$=txtbxSSNOrITIN]')
        .attr("maxlength", ckd? 2 : 5)             // 2 characters if checked, else 5
        .css({
            background: ckd? '#ffff00' : "green",  // yellow if checked, else green
            width: ckd? 24 : 144                   // 24px if checked, else 144
        });

}); 

There's still a smaller issue above, and that's if i.e: user enters initially more than 5 characters, if you click the checkbox the value length will still be 5! So you'll need an additional strip, to remove unwanted characters like:

$(document).on("change", '[id$=ckbxEmp]', function () {

    var ckd = this.checked;
    $('[id$=txtbxSSNOrITIN]').attr("maxlength", ckd? 2 : 5).css({
       background: ckd? '#ffff00' : "green",
       width: ckd? 24 : 144
    }).val(function(i, v){
       // If checked, slice value to two characters:
       return ckd && v.length>2 ? v.slice(0,2) : v;
    });

}); 

If you want to go-pro with the code you build, you might want additionally

prevent the user to feel stupid
by storing the last (the long one) typed value. If the user clicks the checkbox and than realizes "well... that was stupid", by ticking it off again he should get back the old value:

jsFiddle

$(document).on("change", '[id$=ckbxEmp]', function () {   

    var ckd = this.checked;
    var $input = $('[id$=txtbxSSNOrITIN]');
    if(ckd) $input.data("oldValue", $input.val() ); // Remember the current value

    $input.prop("maxlength", ckd? 2 : 5).css({
        background: ckd? '#ffff00' : "green",
        width: ckd? 24 : 144
    }).val(function(i, v){
        // If checked, slice value to two characters:
        return ckd && v.length>2 ? v.slice(0,2) : $input.data("oldValue");
    });

}); 

---

Related Topics