css: text not enclosed by a span tag

I created an HTML-CSS demo with two simple span tags. I added some content to each span, and applied the same CSS code to both. Surprisingly, the content of the right span goes beyond the border, while the content of the left span stays within the border.

body {
  background: #f5f5f5;
}

.container{
  background-color: #5b6dcd;
  color: #fff;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  width:400px;
}

span{
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  width: 100px;
}
<div class="container">
    <span>
    This is a box where you can change the width.
    </span>
    <span>
    o1bn-43OCWVIP2fQNVPTQ1QNQrKc
    </span>
</div>

https://i.stack.imgur.com/S38NX.png

Check out my demo project on CodePen

I'm new to CSS, can someone explain why the content in the right span overflows the border? Thank you for your help.

htmlcss

Answer №1

Enhance your CSS styling with this simple addition:

span {
   word-wrap: break-word;
}

This tweak allows the browser to break long lines of text by word, resulting in a cleaner design like the one shown in the first span.

Answer №2

The reason for the text overflowing is due to the absence of spaces within the content, preventing it from moving onto a new line.

To address this issue, implementing word-break: break-all; will provide a solution by allowing breaks within "words".

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

Whenever I press a button, my desire is for each picture to seamlessly reposition itself in the exact same spot on the screen

Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...

javascripthtmlcss

Blazor Shared CSS File

Currently, I have successfully implemented 2 pages in my Blazor app: Login.razor located in the Auth folder AddPerson.razor situated in the Profile directory At this point, I have managed to integrate a CSS file specifically for the AddPerson.razor page ...

c#cssblazor

aligning a floating image vertically

One issue I am facing in my UI is that I have buttons with images floating next to text. While the setup works well, I am struggling to vertically align the image with the text. I've experimented with various solutions including using vertical-align: ...

htmlcss

AngularJS: Creating a unique directive for verifying the availability of a username - no duplicates allowed

I have a registration form that includes a username textbox. I would like to implement a custom directive that will check if the entered username already exists in the database. Here is the api implementation: /*get the unique username*/ $app->get(&ap ...

htmlangularjs

Chrome runs requestAnimFrame at a smooth 60 frames per second, while Firefox struggles to keep up at

I recently developed a canvas animation using requestAnimFrame and saw great results in Chrome. However, when I viewed it in Firefox, it seemed like a slideshow was running instead of a smooth animation. I'm unsure what could be causing this issue. F ...

javascripthtmlfirefoxgoogle-chromehtml5-canvas

Displaying server errors in an Angular componentIn this tutorial, we

As I work on creating a registration page, my focus has been on posting data to the server. I have successfully implemented client-side and server-side validation mechanisms. Managing client-side errors is straightforward using code such as *ngIf="(emailAd ...

javascripthtmlangularforms

How to centrally align grids in a material-ui react application

I'm trying to center Grid items horizontally inside a Grid container, while also adding some spacing between the items. Here's the code I have so far: import React from "react"; import { makeStyles } from "@material-ui/core/styles& ...

cssreactjsmaterial-uigrid

What are the steps for implementing responsive design animation in my particular scenario?

Can someone please help me with a strange bug in Chrome? I am trying to create a responsive design for my app. The width of the 'item' element should change based on the browser's width. It works fine when the page first loads in Chrome, b ...

javascripthtmlcssanimation

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

htmlcss

implementing a fixed header in HTML

I am facing a challenge where I have a header with dynamic height and fixed position. My goal is to position the container div right below the header. However, since the header height varies, using a fixed value for margin-top is not feasible. Any sugges ...

jqueryhtmlcss

Take away the dropdown selection once the form has been submitted

Every day, a user fills out a form ten times. They choose an option from the dropdown menu, fill out the form, and submit it. I am looking for a solution to either remove the selected option once it's been submitted or mark it as complete by highlight ...

javascripthtmlajax

Is there a way to use jquery and ajax to swap out an image on a webpage when a button is clicked?

I am trying to create a button on my HTML page that, when clicked, will asynchronously change a specific image on the page. Here's what I have so far: <a href="/test/page"> button </a> What I want is for the button click to change this i ...

jqueryhtmlajax

Guide to extracting and utilizing a JSON object received from the parent page

Hello, I've been searching online for quite some time and can't seem to find a solution to my question. If anyone could help, I would greatly appreciate it. Below is the code I am working with: <ion-content> ...

htmljsonangularjs

Change the class upon clicking the element

Looking to create a function that toggles classes on elements when specific links are clicked. For example, clicking on link 1 should add the "active" class to the red element, while clicking on link 2 should do the same for the pink element, and so forth. ...

javascripthtmljquerycss

Tips and tricks for stopping a jquery animation

I have created a hover effect for list items. When I hover over an item, it triggers an animation using the .animate() method. However, when I move my cursor away from the item, the hover animation continues until it reaches its end point. Is there a way ...

jqueryhtmlcssjquery-animate

The issue of footer overlapping the login form is observed on iOS devices while using Safari and Chrome

Unique ImageI am currently working on an Angular 8 project with Angular Material. I have successfully designed a fully functional login page. However, I am encountering a problem specifically on iOS devices such as iPhones and iPads, whether it is Safari o ...

cssangulartypescriptangular-material

Using lxml to extract data from dynamic HTML elements

Struggling to extract information from a dynamic field on an HTML page using the lxml library. The code snippet I've been working with is as follows: from lxml import html import requests page = requests.get('http://www.airmilescalculator.com/d ...

pythonhtmlweb-scrapinglxmllxml.html

Difficulty Encountered when Using Colorbox in Internet Explorer (all iterations)

I've been struggling to get Colorbox working properly on this particular page, even after spending more time than anticipated. The link to the page has been removed for privacy reasons. There's a Colorbox test link at the bottom right corner tha ...

jqueryinternet-explorercssmodal-dialogcolorbox

Using Angular, you can incorporate a dynamic href inside interpolation by using

Looking for a way to include a redirecting link within the response of string interpolation. I am incorporating the API response value into the interpolation binding. For instance, if my response is, "This site is not working. please contact google f ...

htmlangular

Using jQuery to clear a textarea when a select input is changed

Currently, I am in the process of developing a small text editor that enables users to edit files and create new ones. Here is how I have set up my select menu. <select name="reportname" id="reportname" class="form-control"> <option value="zr ...

javascriptjqueryhtmlajax