Choose a paragraph of text that spans multiple lines without exceeding the width

In the image above, the red selection crosses outside of the yellow area when selecting. I would like to only select within the yellow part as shown below:

Here is the HTML:

<div id="parent">
    <div id="child">
        This is some content... This is a long lonnnnnnng content.
    </div>
</div>

For the CSS:

#parent {
    width: 200px;
    background-color: #666;
}

#child {
    padding: 50px;
    background-color: #ff0;
}

::selection {
    background-color: #f00;
}

Can you help me achieve this?

Test code at: http://jsfiddle.net/3AESf/

Answer №1

A possible solution is to apply the CSS property display: inline-block; to the element with ID #parent

Answer №2

If using display:inline-block is not feasible, another option would be to include

overflow: hidden;

in the CSS for #parent. This approach also yields positive results.

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

one container stacked on top of another

I have been creating web pages using tables for a long time. Recently, I decided to make the switch to using divs like everyone else, but it has been quite challenging. Can anyone help me solve this issue? I have included an image to better illustrate the ...

Having trouble getting the auto complete feature to work in AngularJS with jQuery

I have been attempting for the last 5 hours without any success... Below is the code snippet: Within View: <input type="text" ng-model="foo" auto-complete/>Foo = {{foo}} Inside the controller: myapp.directive('autoComplete', functi ...

The offlinefirst.sock encountered an EPERM error

Encountering an error when attempting to run https://github.com/jakearchibald/wittr on Windows bash. Assistance in either resolving or troubleshooting this issue would be greatly appreciated: Development server listening. (PID:469) Config server liste ...

Struggling to send the correct cookies to the API server using Next.js

I have set up an API express server on api.mydomain.com and a Next.js website on mydomain.com. My Next.js application uses getServerSideProps to request data from the API for displaying on the page. However, I am facing an issue where I can set cookies for ...

The component fails to update even after changes are made to the Redux state

I currently have 4 buttons, each with a different color, and I want to display the last 10 button clicks as colors on 10 squares. The redux state is being used to map and display the square colors, which are also stored in localStorage. When a button is c ...

The error message "require is undefined for Electron"

I am developing an application that requires access to the file system (fs) module. Despite having nodeIntegration enabled, the renderer is throwing this error: Uncaught ReferenceError: require is not defined Many similar issues I researched suggested tu ...

Extract individual export icons from the React icon library

I've recently put together an icon package and am ready to share it with the world under the name @rct/icons. Here's a glimpse at my package.json: { "name": "@rct/icons", "version": "1.0.0", "sc ...

How to retrieve values from dynamically generated text boxes using ng-repeat in AngularJS

When using ng-repeat, I am able to display textboxes related to each item. Upon clicking the SaveAll button, I intend to retrieve all textbox values based on ITEM ID and save them to the database. <tr> <td> <table ng-repeat="item in ...

Retrieving data from a nested object with varying key names through ng-repeat

My JSON object contains various properties with unique names: var definitions = { foo: { bar: {abc: '123'}, baz: 'def' }, qux: { broom: 'mop', earth: { tree: 'leaf', water: 'fi ...

What is the best way to determine which section of a promise chain is responsible for an error in Javascript?

(Please excuse any errors in my English) I am currently studying JavaScript promises. Below is a simple JavaScript code snippet for node.js (using node.js version v10.0.0) that asynchronously reads and parses a JSON file using promise chaining. const fs ...

javascript update HTML content

Hello, I am trying to call a function called changeDivHTML which passes an image. <a href="javascript:void(0)" onclick="changeDivHTML(<img src='.DIR_WS_IMAGES .$addimages_images[$item]['popimage'].'>)"> This function ad ...

How to Retrieve iFrame URL Using JQuery / Javascript

My webpage contains the following elements... <div> <iframe id="mainContent"> <iframe id="littleBox"> </div> and I am looking to achieve the following functionality... $(".someButton").live('click', function() { ...

Tips for ensuring browsers maintain the aspect ratio specified by width and height HTML attributes when CSS is applied

I am seeking a method to reserve space in my layout for images before they are loaded by adding width and height properties to the img element. This approach functions as anticipated: img { display: block; border: 1px solid tomato; } <img src="" ...

"Utilizing Regular Expressions and For Loops to Manipulate Strings: Splitting and

I am struggling to create a regular expression that can transform a string formatted like (person,item(bought,paid),shipping(address(city,state))) into a different format like this: person item * bought * paid shipping * address ** city ** state My curr ...

Revealing and concealing adjacent elements within a specified class

In an attempt to create a carousel that functions by hiding and showing images when the next and previous buttons are clicked, I have organized my images in a table and assigned the li elements a class of 'li'. There are four images in total, wit ...

Elements vanish when SHAKE effect is in use

I've been experimenting with this framework and I'm struggling to get the shaking effect to work properly. Whenever I hover over an element, other divs seem to disappear. I tried using different versions of JQuery and JQuery UI on JSFiddle, and i ...

Refreshing the settimeout function through a click event

I'm working on a feature where I use setTimeout to dynamically change the font size of paragraphs. My goal is to have the font size reset when the user clicks on the "reset" button or initiates the timer again. However, I've encountered an i ...

Using AXIOS and VueJs to visually represent data with a two-dimensional array

I'm new to vuejs and I want to display my data response in a two-dimensional table. This is the data I have: [{ "origine": "", "nb": 15 }, { "origine": "?", "nb": 18 }, { "origine": "?L", "nb": 1 }, { "origine": "G", "nb": 298 }, { ...

Design a modern slider with a button that triggers a pop-up modal window

Recently Updated I am working on a testimonial slider using slick slider, and I want to incorporate a modal within each slide. In my custom post type 'Testimonials' (also known as 'getuigenissen' in English), I have various Advanced C ...

Display geographic data using d3 with geoJSON

I am struggling to render a geoJSON file using d3 because I am having trouble targeting the correct features for projection. Instead of working with the typical us.json file used in many d3 examples, my current map focuses on United States "Commuting Zone ...