Question 136671 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to shorten text

How can i shorten this text I’m getting from an API? It makes the textarea too long which is not pretty

<Textarea w='800px' bg='gray.100'  fontSize='13px' ref={SecretRef}>{data.secretKey}</Textarea>

enter image description here

Tags:

2

Answers


  1. 0

    It appears that you should already be familiar with attributes and css styling of a textarea.

    There are a lot of things you can change with attributes, as for example, the number of rows and columns (cols) to display, as well as the wrapping behavior.

    Specifying fewer "cols" and setting wrap to "off" will create a horizontal scroll bar, so that the data can still be examined, while also letting you constrain the horizontal width using cols.

    Refer to the Mozilla developer documentation for a textarea if any of this is unclear.

    textarea {
    font-size: 1rem;
    letter-spacing: 1px;
    background: lightgray;
    padding: 10px;
    max-width: 100%;
    line-height: 1.5;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px #999;
}
    <textarea rows="4" cols="50">
AAAAB3NzaC1yc2EAAAADAQABAAAAgQCENfcKMDEF3+8GP2TPGcpSEvUWk599ZIhp7/kxHt6Izis2y8E+BygKm52I45rsBmPsJeWVcXKe+UzkXM/+4JMfhJG2zLKTO1XeIP4AxBmHBFNtWW6kDm/yb7gO7gYl+JI/nCjFeAr0IwXiqkYT/SgMmUtjrJ6+Bvpk1VIQAQZGUQ== 
</textarea>

<h2>Using wrap="off" attribute</h2>

<textarea rows="1" cols="50" wrap="off">
AAAAB3NzaC1yc2EAAAADAQABAAAAgQCENfcKMDEF3+8GP2TPGcpSEvUWk599ZIhp7/kxHt6Izis2y8E+BygKm52I45rsBmPsJeWVcXKe+UzkXM/+4JMfhJG2zLKTO1XeIP4AxBmHBFNtWW6kDm/yb7gO7gYl+JI/nCjFeAr0IwXiqkYT/SgMmUtjrJ6+Bvpk1VIQAQZGUQ== 
</textarea>
    Login or Signup to reply.
  2. 0

    I think you don’t want to cut the string itself but want to get rid of the scrollbars. So if the commenters’ points aren’t relevant to you, you can easily do that with CSS. Give the textarea are a desired height, set overflow to hidden and finally disallow resizing, if wanted.

    textarea {
    width: 200px;
    height: 30px;
    font-size: 13px;
    overflow: hidden;
    resize: none;
}

    But if the commenters’ points are relevant to you, try something like in the following example. Basically, we first need the same CSS rules from the example above and a little bit of jQuery. Of course, you can also do it with pure JavaScript. But I just want to give a brief demonstration of what else you can do.

    The script automatically adjusts the height of the textarea to fit the text on hover. First, it gets the current height, as set in CSS, to be able to set it back to the original size when hovering out. Then it adjusts the height to the scrollHeight. When hovering out, as already mentioned, everything is reset again. Of course you can also use other events, hover is just one example.

    $(document).ready(function() {
    let textareaHeight = $("#secret-key").height();
    $('#secret-key').hover(
        function() {
            $(this).height(0);
            $(this).height(this.scrollHeight);
        },
        function() {
            $(this).height(textareaHeight);
        }
    );
});
    textarea {
    width: 200px;
    height: 30px;
    font-size: 13px;
    overflow: hidden;
    resize: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="secret-key">rUl0lVdv6DldVAA8azvOPWjcxJYDH7miB7AByBLGFoQ6CtuQLdRn09MLnuxub44FbQ6qm5kxeT97GUOUuRWefYyuYZ2lC4B3L1af7TBdgwKjjHwXPwWRIX2YrPAGtGIUVBp5t5NIKdajEBhX3koeIha9fRnqqaiIIQxGHxCqjPz0eNouR1BQZf8tYI81J71QG8bxmlBQ2wTtyL0jGtkZHPW9H2BhpkWMAPabaepmIN1jDOrFAoZV3Ri93mxMMyiLNjE828dduKISlh5HXf2Swfk4lvrtRNNX2cGw0HBV2Kg0</textarea>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search