Tips on containing text within a div box without exceeding its boundaries

I've been struggling with containing the text in my display area. No matter what I try, the text keeps overflowing and it's driving me crazy. I've researched various solutions like using word-wrap: break-word;, adjusting width manually, but nothing seems to work. How can I make sure the text fits neatly inside the box's container?

  • Note - The total is a result calculated based on user input

#total {
  border-radius: 5px;
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
  word-wrap: break-word;
}
<p id="total" style="position: absolute; right: 400px; width:200px; height: 200px; font-size: 10px;"></p>

htmlcss

Answer №1

Add the CSS property of overflow-y:auto;

#total {
  border-radius: 5px;
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
  word-wrap: break-word;
  overflow-y:auto;

}
<p id="total" style="position: absolute; right: 400px; width:200px; height: 200px; font-size: 10px;">HEllloo sdadsasdlkmjal... (text continues) ...sdadsasdlkmjal</p>

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

Leveraging jQuery for Adding Text to a Span While Hovering and Animating it to Slide from Left to

<p class="site-description">Eating cookies is <span class="description-addition"></span>a delight</p> <script> var phrases = new Array('a sweet experience', 'so delicious', 'the best treat', ...

javascriptjqueryhtml

I'm having trouble getting the footer to stay at the bottom of my website

Struggling with positioning my footer at the bottom of my website, I've tried various solutions posted by others but they don't seem to work for me. I've experimented with different methods like using 'Bottom: 0;' or placing my fo ...

htmlcss

Svelte remains static and is not experiencing re-rendering

I am currently incorporating the history component in Svelte, where it should display when changes occur in the bids array. const bidsArray = [ { player: 0, bidType: 'pass' }, { player: 1, bidType: 'level', level: '1&apos ...

javascripthtmlsvelterenderrerender

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

javascriptjqueryhtmlcss

Having trouble with implementing jQuery fadeIn for thumbnail images inside a div?

I'm trying to create a functionality where clicking on a thumbnail image in a div will display the full-size version of that image in another div. I want to implement this using the jQuery fadeIn function, but my code isn't working and I am not v ...

jquerycssimagehtmlfadein

Conceal the slider image without removing it

Is there a way to hide the slider background image on mobile screens? @media screen and (max-width: 800px){ .home #mainSliderWrapper { background-image: none; } .stlye { background-image: none; } .img--holder { background-image:none; } } I tr ...

htmlcss

What is the best way to extract a JSON object from a website search using getJSON or similar techniques?

Can anyone provide guidance on utilizing .getJSON() to access JSON-encoded information from a website that is being searched? I've implemented a Google Custom Search API for my site with the aim of retrieving the JSON file from the search results. Fo ...

javascripthtmljsongoogle-search-api

data-cy appears in the DOM structure, yet remains unseen

I'm seeking some clarity on how to effectively use Cypress. While writing end-to-end tests, I encountered a failed test due to the element not being visible. A helpful answer I found assisted me in resolving this issue by clicking an element that was ...

javascripthtmlmaterial-uicypressregression-testing

Overflow due to cascading style sheets

THE ANSWER TO THIS QUESTION HAS BEEN PROVIDED In regards to this particular div that contains two unordered lists, I am seeking a solution where these lists can be positioned side by side instead of above or below each other. I have attempted various met ...

htmlcssmenucss-float

What is the best way to assign a percentage width based on a variable in jQuery?

Is there a way to assign a dynamic width value to an element? Here is the code I am using: $(".menu_list_item").css({ width: width + "%" }); Unfortunately, this doesn't appear to be functioning correctly. If anyo ...

javascriptjquerycss

There seems to be an issue with configuring placeholders in Tailwind CSS

After deciding to switch to using only tailwind CSS, I noticed that on a particular page there were inputs with transitions but no icon on the inner left side. Adjusting the colors and position of the placeholder helped prevent collisions between the icon ...

htmltailwind-css

Displaying the content of a modal window

I am working on a modal that needs to print only the content within it, nothing else. Here is the setup for the button inside the modal: This should not be printed... <button id="btnPrint">Print (this btn should not be printed!)</button> ...

htmlcssangularjsbootstrap-modalangularjs-ng-click

Tips for wrapping text to fit the width of a column

Hello, I have a table with varying column widths as shown below ${"#goldBarList"} table tr td:first-child{width:5%;} ${"#goldBarList"} table tr td:first-child+td{width:5%;} ${"#goldBarList"} table tr td:first-child+td+td{width:6%;} ${"#goldBarList"} table ...

javascriptjquerycss

Global style applied to image property

Within my CSS file, I have a property (shown below) that is set to apply to all images: img{height:auto;max-width:100%;} However, I have a specific div where I do not want this property to apply to the images within it. Even after assigning a new image c ...

css

Setting background colors for classes based on an array

I have a total of six div elements on a single page, all sharing the same class. My goal is to give each one a unique color from an array I have prepared. I want to avoid any repetition of colors among these divs. Currently, I have managed to assign backg ...

javascriptcssarrays

What is the best way to consistently update my database with an accurate time stamp every 5 seconds?

My database has a table named user which includes a field called last_seen. I am looking to regularly update this field with the current timestamp every 5 seconds. ...

phpjqueryajaxhtml

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

Building an array of ids that contain the checkbox type using jQuery: What's the best way?

Below is the HTML snippet I am working with: <!-- Parent checkbox code goes here --> <input id="ckbCheckAll" class="custom-check ez-hide" type="checkbox" name=""></input> <!-- Child checkbox codes follow --> <input id="practice_ ...

javascriptjqueryhtmlcheckbox

When using AngularJS with DateRangePicker, I am encountering an issue where my ng-model does not capture the input text value when I select a date

Trying to establish the selected date range in an ng-model called dateRange in the following HTML. The input text field displays the selected value correctly, but dateRange remains null. What steps can I take to address this issue? <!DOCTYPE html> ...

jqueryhtmlangularjsangularjs-directivedaterangepicker

Managing elements within another element in Angular

I am currently exploring the use of Component Based Architecture (CBA) within Angular. Here is the situation I am dealing with: I have implemented three components each with unique selectors. Now, in a 4th component, I am attempting to import these compon ...

javascripthtmlangulartypescriptjhipster