How can I showcase oversized tokens within div boxes effectively?

I have a token that was generated and I need to show it within a container div

#container {
  padding: 10px;
  background: #f0f0f0;
}
<div id="container">eyJhbGciOiJSUzUxMiJ9.eyJhcGkiOnsiZGF0YVByb3ZpZGVyIjp7InR5cGUiOiJodHRwIiwib3B0aW9ucy6eyJ1cmwiOiJodHRwczovL3d3dy5leGFtcGxlLmNvbSJ9fSwiZGF0YVNvdXJjZXMiOnsibGVhZGluZy6eyJpZCI6InNvdXJjZUVudGl0eSIsImVudGl0eVR5cGVJZCI6Im1haW5FbnRpdHkiLCJmaWVsZElkcyI6WyJhIiwiYiJdfSwiZm9sbG93aW5nIjpbeyJpZCI6ImZvbGxvd2luZ0VudGl0eSIsImVudGl0eVR5cGVJZCI6InJlbGF0ZWRFbnRpdHkiLCJmaWVsZElkcy6WyJhIiwiYyIsImQiXSwiZGVwZW5kc09uIjp7ImRhdGFTb3VyY2VJZCI6InNvdXJjZUVudGl0eSIsInJlbGF0aW9dynsiOIkImlzUmVsYXRlZFRvIiwic291cmNlSXMiOiJvdGhlciJ9fX1dfX0sImZpZWxkcy6W3siaWQiOiJhIiwidGl0bGUiOnsiZW4iOiJBIn0sImlzUmVxdWlyZWQiOnRydWUsImRhdGFUeXBlIjp7InR5cGUiOiJib29sZWFuIn0sImRlZmF1bHRWYWx1ZUZ1bmN0aW9uQXNTdHJpbmciOiIoKSA9PiB1bmRlZmluZWQiLCJydWxlcy6W3sicnVsZUZ1bmN0aW9uQXNTdHJpbmciOiIoKSA9PiB0cnVlIiwiZXJyb3JNZXNzYWdlIjp7ImVuIjoiZmFsc2UifX1dfV0sImxvb2t1cHMiOnsiaW5pdGlhbExvb2t1cHMiOlt7ImlkIjoibG9va3VwLTEiLCJzb3VyY2UiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAvbG9va3VwLTEifV19LCJ1aSI6eyJmb3Jtcy6W3siaWQiOiJmb3JtLTEiLCJmaWVsZHMiOlt7ImlkIjoix-fJYCIsImlzUmVhZG9ubHkiOmZhbHNlLCJpc0HpZGRlbiI6ZmFsc2V9XX0seyJpZCI6Ix-xCNkdVDmIi-ontoFuw-caseIVAN65SKIIsejeEURmwwNGtlVi-gewWCw-S-q1AmhUMBXxaGjfjmZ_I53ZZqa_CPihWxBB23q-IoSXJJjlacSoipiLMFSAAAAeiKa502AIjhxfAOs79garbp89BI453uUbJV_c1Eo-jDSBS-gHQ-cLygD9nz_auV_V_P1QEwt-AcnPB-JMPqsflgpTVeZhag_YMcGvlZtZNfqAdaaC-b-lisniutIA-Hkar_HjuSU-ZPCBQnbDdjYNYd-LjTgsPlCo-sDBKGitGY-iMBEqLfoc4Mu...;</div>

It's noticeable that the token is wider than the container and doesn't break into a new line automatically. How can I properly display long tokens like this?

htmlcss

Answer №1

word-break is perfect for handling this issue. Check out the css-tricks article for more information.

#container {
  padding: 10px;
  background: #f0f0f0;
  word-break: break-all;
}
<div id="container">eyJhbGciOiJSUzUxMiJ9.eyJhcGkiOnsiZGF0YVByb3ZpZGVyIjp7InR5cGUiOiJodHRwIiwib3B0aW9ucyI6eyJ1cmwiOiJodHRwczovL3d3dy5leGFtcGxlLmNvbSJ9fSwiZGF0YVNvdXJjZXMiOnsibGVhZGluZyI6eyJpZCI6InNvdXJjZUVudGl0eSIsImVudGl0eVR5cGVJZCI6Im1haW5FbnRpdHkiLCJmaWVsZElkcyI6WyJhIiwiYiJdfSwiZm9sbG93aW5nIjpbeyJpZCI6ImZvbGxvd2luZ0VudGl0eSIsImVudGl0eVR5cGVJZCI6InJlbGF0ZWRF...

Answer №2

#container {
  padding: 10px;
  background: #f0f0f0;  
  word-wrap: break-word;
}
<div id="container">eyJhbGciOiJSUzUxMiJ9.eyJhcGkiOnsiZGF0YVByb3ZpZGVyIjp7InR5cGUiOiJodHRwIiwib3B0aW9ucyI6eyJ1cmwiOiJodHRwczovL3d3dy5leGFtcGxlLmNvbSJ9fSwiZGF0YVNvdXJjZXMiOnsibGVhZGluZyI6eyJpZCI6InNv...

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

Seamless transition of lightbox fading in and out

Looking to create a smooth fade in and out effect for my lightbox using CSS and a bit of JavaScript. I've managed to achieve the fading in part, but now I'm wondering how to make it fade out as well. Here is the CSS code: @-webkit-keyframes Fad ...

javascriptcsslightboxtransition

Maintain the original proportions in a thumbnail photo

When creating thumbnails for my blog, I typically use a size of 100 * 60. But there are times when I want to use square images instead. Is there a way to adjust the size using a Wordpress plugin or CSS so that it maintains the original image ratio by addi ...

csswordpressimage

Design a table without borders that is compatible for pasting into a Word document

I've been struggling to figure out the correct format for creating a border-less table that, when pasted in Word, will maintain its appearance as shown below: <strong>Foo</strong> <ol> <li value="0">This is zero.</li&g ...

htmlcssms-word

The size of jVectorMap is displayed too diminutive

Why isn't my jVectorMap adjusting to the new height I've specified for the containing div? It only displays at the default height of 54px. Within a document.ready function in my scripts.js file, I have the following code: $('#team-map-usa& ...

javascriptjqueryhtmlcssjvectormap

The text appears choppy as the javascript is in the process of loading

Upon integrating a basic javascript function into my website to request data from another source, I noticed that the text in the header div suddenly shifts left and then centers itself while the site is loading. This strange movement occurs every time the ...

javascripthtmlcss

Displaying a full-page background image using CSS3 is achieved by setting it below

I am attempting to configure a full page background image by using the following code in the css file html { background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

cssbackground-image

Dynamic placement of divs when new content is added to the page

Before we begin, I'll provide you with the complete HTML code of my webpage: <div align="center"> <img src="http://questers.x10.bz/Header.png" style="position: absolute; margin-left: -440px; box-shadow: 0px 3px 12px 2px #000;" class="rotate" ...

htmlcss

The AudioContext feature is functioning properly on Google Chrome but experiencing issues on Safari

In Safari, I understand that audio context needs to be created after user interaction. Despite this knowledge, the code below still didn't produce the desired result. HTML <button onclick="play">Play</button> Javascript functio ...

javascripthtmlsafariaudiocontext

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf

Adjusting the characteristics of a class when hovering

Is it possible to change the CSS property of a class when hovering over another class in CSS? #_nav li { display:inline; text-decoration:none; padding-top:5vh; line-height:8vh; margin-right:5vh; cursor:pointer; } #_nav li:hover + ...

jqueryhtmlcsscss-selectors

Choose a background image optimized for either mobile or desktop devices

My webpage displays a background image and text on the footer, which works perfectly for desktop users. However, mobile users are experiencing issues with the image not resizing to fit their screen size. Below is my CSS code: body { margin-top: 50px; ...

androidjqueryhtmlcsstwitter-bootstrap

How to use rvest in R for unformatted web scraping

Can anyone help me with extracting lyrics from a website using R? My current output is not formatted correctly. library(rvest) url <- "https://www.letras.mus.br/lily-allen/fuck-you" datatest <- read_html(url) b <- datatest %> html_node(" ...

htmlrweb-scrapingrvest

Effective strategies for integrating Bootstrap and AngularJS without relying on jQuery

Currently exploring AngularJS after experimenting with Twitter's Bootstrap. I appreciate Bootstrap for its simplicity, sleek design, and mobile-friendliness. On the other hand, I have noticed a trend where people recommend using AngularJS over jQuery, ...

javascripthtmlangularjstwitter-bootstrap

Incorporating JSON data visually into an HTML document

How can I include a json file, which is a gif, as an image in an HTML file so that it displays on the page? I attempted to do so with the following code: <img src="myFile.json"/> However, it doesn't seem to be working. I searched onl ...

javascripthtmljsongifanimated-gif

Guide to dividing the screen into three horizontal sections

I am currently working on a website and trying to divide a page into three different sections: one for the title and a button, one for the content, one for the text input. . The issue I'm facing is that the divs are not filling the height and ...

htmlcss

Modify content across various HTML pages using a central JavaScript file

I am in the process of updating my website, and I have multiple pages with a section that contains identical text. I want to be able to update this text easily from a master .js file named "my_info.js". To link to this file, I have inserted the following ...

javascripthtml

Submit data from one form to another form located within an iframe

I am currently using a JX Browser that allows content to be displayed in an iframe. My goal is to automatically transfer the username and password of a user logging into my ticketing software to another form within an iframe. The page within the iframe is ...

javascriptphpjqueryhtmliframe

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

After developing some basic jQuery code using if-statements to toggle the visibility of Divs based on a select list in HTML, I am seeking ways to enhance this code: 1) How can I achieve the same functionality with fewer lines of code? 2) Rather than manu ...

javascriptjqueryhtmlif-statementoptimization

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

css

Click on the dropdown menu to reveal a form, and simply click outside of it to make

My dropdown menu with form elements hides when anything outside of it is clicked, but unexpectedly also closes when I click inside the element. This makes it difficult to complete a form. Below is the function causing this behavior: $(function(){ $(& ...

javascriptjqueryhtmlcss