Trimming content from the center in Material UI

Hey there, I am currently utilizing Material UI in my React application and attempting to truncate text from the middle. Despite conducting thorough research and testing different methods such as adding classes like wordWrap: 'break-word', I have not been able to achieve the desired outcome.

Here is an example of the token:

0x3b3ch76c99f02o8k29aef20

I would like to display it in this format:

0x3b3c...aef20

While I did manage to make it work using 

{token.substring(0, 5) + "..." + token.substring(20, 25)}
, this solution does not appear to be very versatile or generic.

cssreactjsmaterial-ui

Answer №1

To create a more dynamic solution, consider utilizing the length of the input string

const modifyToken = (token) => {
  return `${token.slice(0, 6)}...${token.slice(
    token.length - 6,
    token.length
  )}`;
};

const updatedToken = modifyToken("0x3b3ch76c99f02o8k29aef20")
// result: 0x3b3c...9aef20

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which should be utilized in React: this.state or this.props?

Hey there, I'm just getting started with React and have a question regarding components. I've created a component that looks like this: class HeaderLabel extends React.Component { constructor() { super(); } componentWil ...

reactjscomponents

Is 100% truly the same as 100%?

When positioning two divs side by side with widths set in percentages, a total of 100% is often too wide and results in the divs not sitting next to each other as intended. Reducing the total width to 99% can create an uncomfortably large gap between the ...

htmlcss

Utilizing Selenium with Java, you can hover over a button and choose to click on any of the available options

Currently, I am utilizing Selenium to automate the user interface using Java. Within the UI, there is an action button that, when hovered over by the User, displays two clickable options - Create and Edit. For ease of use, I have stored CSS locators as E ...

javacssseleniummousehover

Encountering the message "error: 'editorState' is not a valid property of type 'IntrinsicAttributes'"

Currently, I'm developing a post section for my web application and I made the choice to utilize react-draft-wysiwyg. Everything was going smoothly until I set editorState={editorState}. I am unsure of the exact cause of this issue (especially since I ...

reactjsnext.jsdraftjsreact-draft-wysiwyg

What is the best solution for resolving the 'CORS policy' issue that is occurring when attempting to launch my React-admin application on Rails 6 with ActiveStorage integration?

Currently utilizing Rails 6 and ActiveStorage for file storage on S3. An issue arises with CORS when attempting to run my react-admin app. Error message from the react-admin frontend: Access to fetch at 'https://my-backend.com' from origin &apo ...

reactjsruby-on-railsamazon-s3amazon-ec2react-admin

Switch does not properly handle redirection when a Fragment is present

Version "react-router": "5.0.1", Test Case <Switch> <Route component={TestComponent} key={TestComponentPath} path={TestComponentPath} exact /> { exampleCondition && ( &l ...

javascriptreactjsreact-router

Unsure why the React button is disappearing specifically on Safari iOS. Any thoughts on how CSS

Hey there! I created a small hamburger button for my website, but for some reason, it doesn't show up on Safari iOS. Interestingly, it works perfectly fine on Windows Chrome, Windows Firefox, and my Android device. I've been trying to troubleshoo ...

htmlcssiosreactjsweb

How to perfectly position various height <a> elements in a WordPress mega menu

I'm currently working on a WordPress mega menu with four columns, each with a heading or top menu item. The headings should have a gradient border at the bottom and differ in length. However, I'm facing an issue where some headings span two lines ...

htmlcsswordpress

Setting up the Gumby Framework: A Step-by-Step

As I begin to delve into learning a Responsive CSS Framework, I've decided to do a comparison between Foundation 4, Gumby, and Bootstrap on my own. I had success running Foundation 4 and Bootstrap, but unfortunately Gumby didn't cooperate. Upon ...

htmlcssframeworksinstallationresponsive-design

Tips for keeping the left grid column content visible while scrolling

I have set up a bootstrap grid with one row and two columns like this: <div id="main"> <div class="row"> <div class="col-sm-2 first-col"> Is there a way to keep this column fixed while scrolling? </div> <div ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Setting table row styles for odd and even rows, based on user clicks of an <input type="file"> button

I'm currently working on a feature that allows users to upload files to a page using an button. Each file is displayed in a table as a new row. I am looking for a way to set the background color differently for odd and even rows. As of now, I am usin ...

jquerycssinputinternet-explorer-8input-type-file

How can I adjust the width of td based on the content they contain?

Is it possible to dynamically set the width of a <td> in a table to match the size of the largest <td> in that column while still ensuring the table remains at 100% width? Occasionally, my table doesn't reach 100% width due to empty colum ...

javascripthtmlcss

Issue with making a call to retrieve an image from a different directory in ReactJS

This is how it appears <img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} /> I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only ...

javascripthtmlcssreactjswebpack

Make sure that the parent element is only visible once all of its child elements have

As a newcomer to the world of react, I am facing some challenges. I have created a form in react which includes a dropdown. To ensure reusability across multiple pages, I decided to turn this dropdown into a component that is responsible for fetching all n ...

javascriptreactjs

Is it achievable to animate the offset with React Native Animated?

I am attempting to develop a dynamic drag and drop functionality, inspired by this example: My goal is to modify it so that when the user initiates the touch, the object moves upwards to prevent it from being obscured by their finger. I envision this move ...

javascriptiosreactjsanimationmobile

Enhance the performance of React code by refactoring it

Having recently started coding in React for a new organization, I find that the code in my component has grown lengthy and the submithandler method is causing multiple array iterations. Is there a way to refactor the code for better performance? The data t ...

javascriptreactjsreact-nativereact-redux

Combine theme configuration options within Material-UI

I am interested in setting up custom theme rules in Material-UI. My goal is to create both light and dark themes and extend them with some shared settings. My initial idea was to store the common settings for the light and dark themes in a separate variab ...

javascriptarraysmaterial-ui

Steps to configure the character count feature for textarea input

How can I create a word counter for a textarea with specific width and height, ensuring that the maximum number of words typed in the textarea does not exceed 100? HTML <div class="input-box"> <textarea name='textArea' id='tex ...

jqueryhtmlcss

Populate a div with divs using automatic margins (CSS)

I know this question has probably been asked before, but I've searched high and low and can't seem to find an answer. It seems like my front-end skills are lacking when it comes to searching for solutions. Apologies in advance if this is a redun ...

csscss-floatcontainersmargin

What is a clear indication that a <div> is filled with text?

Picture a scenario where a website contains an element that needs to be filled with random text using JavaScript. Once the div is completely filled, it should reset and begin again. It may sound odd, but the question is: how will the JavaScript determine w ...

javascripthtmlcss