What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Is there a way to make a div or span within another div act as text, causing overflow to shift to the next line?

I'm unsure of which CSS properties would achieve this effect.

I've attempted using

overflow-wrap: break-word;
word-break: break-all;

Here is my current structure:

<div class="parent">
   <span> Some text before </span>
   <span class="makeItOverflow"> <div>Loooong text ...</div> </span>
   <span> Some text after </span>
</div>

I am hoping for an outcome similar to this image: https://ibb.co/P1XcMh7.

javascripthtmlcsstypescript

Answer №1

After digging through the code, I finally discovered the solution. It turns out that utilizing a mix of display: inline, white-space: initial, and word-break: break-all was the key. Despite the complexity of my structure, specifying inline elements further down the hierarchy was all it took to resolve the issue!

I appreciate the assistance from everyone who contributed their insights!

Answer №2

To ensure that the three span elements are presented as one cohesive sentence or paragraph, you can enclose each of them within a <p> element.

.parent {
  width: 300px;
}

.makeItOverflow {
  background-color: orange;
}
<div class="parent">
  <p>
    <span> Some text before </span>
    <span class="makeItOverflow">Loooong text ...</span>
    <span> Some text after </span>
  </p>
</div>

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

When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

Looking for some help with responsive design for the "PORTFOLIO ATTRIBUTES" tab on my website. On desktop, the content displays fine, but on mobile it overlaps and cuts off. Here's the link to the page in question: . Any suggestions on how to maintai ...

htmlcssresponsive-design

Customizing the appearance of the dragged element in jQuery UI

Is there a way to modify the color of a draggable list item after it has been dragged? Any assistance is greatly appreciated. $("#DragWordList li").draggable({helper: 'clone'}); ...

cssjquery-ui

Issue encountered: Object is not functioning properly with Node.js AuthenticationExplanation: A TypeError occurred

As a newcomer to Stack Overflow, I am doing my best to ask this question clearly. I am currently following a tutorial step by step ( http://scotch.io/tutorials/javascript/easy-node-authentication-setup-and-local ) but I encountered an issue after the thir ...

javascriptnode.jsauthenticationexpress

Can React Native support styling using server-side data?

One of my React Native (RN) components is rendering data from an external server. The data is enclosed within RN components. For example: ... <View> <Text>{this.props.db.greeting}</Text> </View> The 'DB' object is si ...

javascriptreactjsreact-nativejsx

The intersection of CSS and IE7's Z-Index feature

Hey there, I could really use some help! If anyone has any ideas for fixing a z-index issue in Internet Explorer 7 with CSS/JavaScript on this page while keeping the DOM structure intact (it's currently optimized for easy tab navigation), I would gre ...

cssinternet-explorer-7z-index

How to sort Firebase real-time database by the child node with the highest number of

I am working on a database feature that allows users to 'like' comments on posts. Is there a way for me to sort the comments based on the number of likes they have? Although I am aware of using .orderByChild(), my issue lies in not having a sep ...

javascriptfirebasefirebase-realtime-database

Tips for implementing HTTP requests in Angular 2 without TypeScript

The demonstrations provided by the angular team only illustrate injecting Http for typescript. https://angular.io/docs/js/latest/api/http/Http-class.html How can this be accomplished in JavaScript? import {Http, HTTP_PROVIDERS} from 'angular2/http& ...

javascriptangularjsangular

Failed PHP response when jQuery was called

I'm working on a project that involves two files: one PHP and one HTML. The HTML file acts as the user interface where users input their queries, while the PHP file handles the processing and events before returning the output back to the HTML file. I ...

javascriptphpjqueryhtmlajax

varied reactions between componentDidMount and useEffect when employing jquery emoji plugin

Currently, I am facing an issue with a jquery emoji plugin that I need to use on one of my components until I complete building a custom plugin. Interestingly, when I call the emoji plugin inside componentDidMount, everything works fine, except for the ab ...

javascriptreactjsemoji

Customize the Grid Offset in CSS like BootstrapCSS Grid Offset

I am attempting to replicate the offset feature in Bootstrap's desktop grid system, where a class like .col-md-offset-3 creates an offset using margin-left. However, in my implementation found at this link, the CSS selector does not work as intended: ...

htmlcssgridmargin

Resolving CSS Conflict in Panels with Legacy Bootstrap

I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...

csstwitter-bootstrap

Is there a way to fetch the version of my npm application without pulling in additional package.json details?

I am working on a Single Page Application (SPA) using React and built with Webpack as part of create-react-app. In my application, I display the version number fetched from package.json like this: import npmInfo from 'package.json' ... <div c ...

javascriptnpmpackage.json

Incorporate React Components into a traditional HTML, CSS, and JavaScript project

Can I incorporate a React Native Component (https://www.npmjs.com/package/react-native-gifted-chat) into my vanilla JavaScript project? Is it feasible to embed a React Native component within a vanilla JavaScript project? If yes, then what is the process ...

javascriptreactjsreact-native

Align the bottom borders to the lowest content on each line

I am working on designing my homepage using HTML, CSS, JSP, and JavaScript, focusing on the sale of musical instruments and facilitating communication among users. Right now, I am in the process of creating a site-map for my menu configuration chart using ...

htmlcssborder

Bringing the value from the codebehind to the jquery function on the client side

Here is the code snippet from my asp.net web application's code behind where I have integrated another web service: [WebMethod] public static string GetData(string name) { WEBSERVICE.Service1 Client = new Service1(); string Nam ...

c#javascriptjqueryasp.net

Is it possible to use the same HTML select/dropdown menu for multiple rows in a table?

I am working with an HTML table that usually has between 10-30 rows, each containing a column for "item name". The drop down menu consists of about 75 products to choose from. In order to reduce the page size, I want to use a single drop down list for all ...

javascriptjqueryhtml

"An error occurred stating that currDateEnd.setHours is not a valid function

I am attempting to transform my date into ISO format and adjust the hours to 23. Below is my code: var currDateEnd = $('#calendar').fullCalendar('getView').start; console.log(currDateEnd); currDateEnd.toDate().toISOString(); console.lo ...

javascriptmomentjs

Utilizing an Angular Service within the main.ts script

My main.ts file currently has the following code snippet: declare const require; const translations = require("raw-loader!./locale/messages.de.xlf"); platformBrowserDynamic().bootstrapModule(AppModule, { providers: [ { provide: TRANSLATIONS, useVa ...

angulartypescriptservice

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

VueJS - When using common functions, the reference to "this" may be undefined

I'm struggling to extract a function that can be used across various components. The issue is that when I try to use "this", it is coming up as undefined. I'm not sure of the best practice for handling this situation and how to properly assign th ...

javascripttypescriptvue.jsecmascript-6