Is there a way to create automatic line breaks in this text?

Is there a way to automatically ensure the span spans multiple lines?

I am working with HTML and CSS.

Below is a modified version of my code, as some parts are in PHP:

<div style='border: 1px solid; padding: 10px; margin-top: 5px;'>
  <h2 style='margin: 0;'>Name&nbsp-&nbsp#id</h2>
  <hr>       
  <span>
    ContentContentContentContentContentContentContentContentContentContentContentContent
  </span>
</div>
<br>

Any suggestions on how to truncate this content dynamically?

Should it look like this (with automatic line breaks):

htmlcssscaledevicedisplay

Answer №1

To achieve this, simply include the word-wrap and/or overflow-wrap properties in your CSS.

<div style='border: 1px solid; padding: 10px;margin-top: 5px; max-width:200px'>
    <h2 style='margin: 0'>Name&nbsp-&nbsp#id</h2>
    <hr>
    <span style='word-wrap: break-word; overflow-wrap: break-word;'>
        ContentContentContentContentContentContentContentContentContentContent</span>
</div><br>

Answer №2

When this particular styling is applied:

style='word-wrap: break-word; overflow-wrap: break-word;'

The code should be inserted into the div element, as shown below:

<div style='border: 1px solid; padding: 10px; margin-top: 5px; word-wrap: break-word; overflow-wrap: break-word;'>
    <h2 style='margin: 0'>Name&nbsp-&nbsp#id</h2>
    <hr>
    <span>ContentContentContentContentContentContentContentContentContentContentContentContent</span>
</div><br>

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

Send data from a PHP form with various input types using JavaScript and AJAX

I need to submit a form with various fields, including multiples checkboxes selection and some hidden input fields via AJAX and then replace the HTML content with the response. I decided to use JavaScript/AJAX for this process, but did I make any mistakes? ...

phpjqueryhtmlmysqlajax

How can I automatically scroll to an anchor element once CSS animation has finished

I am currently working on a CSS animation that looks like this: @-webkit-keyframes flip { 0% {opacity:1;} 100% {opacity: 0;} //This could be 90% //And here could be frame for 100% which would scroll it down. } #headercover { -webkit-animation-name ...

javascriptjqueryhtmlcss

Tips for reducing the amount of white space on a card featuring a pie chart in a mobile layout

Is there a way to adjust the size of the pie chart or reduce the white space at the bottom? In the mobile view after inspecting with Chrome dev tools, it seems like the chart is not displaying as desired. Here is the screenshot <div ...

cssbootstrap-4chart.js

Struggling with dynamically updating fields based on user input in real time

I have a goal to update a field based on the inputs of two other fields. Currently, all the fields are manual input. Below is the code I'm using to try and make the "passThru" field update in real-time as data is entered into the other fields. The ma ...

javascripthtmlnode.js

A div positioned to the left is placed beneath another div

I am faced with a design challenge involving two divs. The first div is floated left, while the second div is floated right. In order to achieve a responsive layout, I need the first div to go under the second div when the viewport changes. Both divs conta ...

csshtml

I can only use innerHTML once in my React application

I am attempting to clear my container div when the user clicks the search button in order to remove all existing search results. However, I am encountering an issue where using innerHTML to clear the container div only works the first time. If a second sea ...

javascripthtmlreactjsreact-nativereact-redux

What is the best way to retrieve the value of an element enclosed within a tag?

<div class="player__AAtt"> <div> <play-js data-account="1234567890" data-id="32667_32797"> </play-js> </div> </div> Is there a way to extract the values of data attr ...

pythonhtmlseleniumtags

Adjusting the options in the subsequent dropdown menu based on the selection made in the initial dropdown menu

I am currently working on select boxes where values are dynamically added through an array. For example, if I have 4 values in the first select box, I only want to display 3 values in the second select box, excluding the value that has already been selecte ...

javascriptjqueryhtml

What is the best way to enable a DOM element's height to be resized?

I have a widget displayed in the corner of my browser that I would like to make resizable by dragging the header upwards to increase its height. The widget's position remains fixed with its bottom, left, and right properties unchanged, but I need the ...

javascripthtmlcssresizablejquery-resizable

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'. My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScri ...

csscss-grid

Is getElementById() returning null?

I'm currently working on a JavaScript program that takes an image URL and displays it on the page by creating an <img> tag. This way, I can easily add multiple images to the page. Here is my code: <!DOCTYPE html> <html lang="en&quo ...

javascripthtmlimagesrccreateelement

Troubleshooting issue with removing an item from jQuery's html5 localStorage

Exploring the following code snippet: $('#doneItem').click(function(){ $(this).each(function(index){ var item = 'personal' + index; alert(item); localStorage.removeItem('personal' + ...

jqueryhtmllocal-storage

When a page is being redirected using requestdispatcher in a filter, the CSS contents do not seem to be applying correctly

Upon evaluation of the condition, if it fails, I am utilizing a request dispatcher to redirect to another page. The redirection is successful, however, the CSS is not being applied to the new page. What could be causing this issue? public class RolePrivil ...

htmlcssjsfrichfacesservlet-filters

The cascading menu causes interference with the function of other elements in the

I am currently designing a navigation bar that includes a drop-down menu (with plans to add another one in the future). The issue I'm facing is that when the user clicks on the drop-down menu, it shifts all of the navigation links to the right. What I ...

javascriptjquerycss

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

In my user interface, I have implemented three radio buttons labeled as "Easy," "Medium," and "Hard." Each button is assigned to a distinct Javascript function that manipulates the visibility of corresponding div elements. The main purpose behind this setu ...

javascriptjqueryhtmlcsshidden

Numerous categories housed within various div containers

I am working with an HTML code that contains 6 different div elements: <div class="hisclass1 hisclass2 myclass hisclass3"> <div class="herclass1 herclass2"> <!-- 2nd div --> </div> </di ...

htmlcss

I am unable to view the input appearing inside the input box on my React/HTML application

I have been developing a React app for building portfolios, but I am facing an issue where I cannot see any text that I type into my input boxes. Can someone please help me troubleshoot this issue? Any assistance would be greatly appreciated. I have made ...

javascripthtmlreactjs

When the screen is resized, the embedded iframe moves smoothly to the left side

I recently created a projects page, but I am facing an issue with the iframe embed. Whenever the screen is resized, it keeps shifting to the left. However, what I really want is for it to be centered instead of being on the left side: https://i.stack.imgu ...

htmlcssfonts

Ensure each checkbox within a list is selected

My dilemma involves an assortment of checkboxes enclosed within LIs and SPANs in an unordered list. To simplify the checking process, I attempted using jQuery to automatically check all boxes when a button positioned above the UL is clicked. However, my ...

jqueryhtml

:selected element malfunctioning

I've been struggling to make the following code work: html <div class = "col-md-4 video text-center wrapper-q1"> <p class = "no-padding"> <input class="question1" id = "vraag1" type="radio" name="q1" value="Moon"> < ...

htmlcssinputradio-buttonchecked