Eliminate any spaces surrounding the text within the div tag

Is it possible to eliminate extra space at the end of text using CSS (or possibly JS)? I've experimented with various display properties, but none seem to be effective. I need to dynamically insert a blink-div at the conclusion of a multi-line sentence. Presently, it's added beyond the boundaries of the phrase-div encompassing the text content (which, being a div element, includes unnecessary white space). The HTML structure is as follows:

<div id="writr-div">
    <div id="phrase-div"></div>
    <div id="blink-div"></div>
</div>

Please refer to both images for a comparison:

Original:

https://i.sstatic.net/TNlA1.jpg

Desired effect (border and background are included for demonstration purposes):

https://i.sstatic.net/eu6bw.jpg

EDIT: I might not have clarified my request properly. This is what I am looking for (without absolute positioning, I require it to be at the end of the sentence, regardless of its length):

https://i.sstatic.net/daRmH.jpg

Thanks, Luca

javascripthtmlcsswhitespaceremoving-whitespace

Answer №1

One simple solution is to use span elements:

#writr-div {
  width:140px;
  border:1px solid;
}
#blink-div {
  border:1px solid red;
} 
<div id="writr-div">
    <span id="phrase-div">Include some text here and there</span>
    <span id="blink-div"> and add another block of text</span>
</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

Create an animation where an element glides smoothly over the others, extending to a specific width

How can I make a table of headings stretch to the width of the table and then slide down over the others when one of the headings is clicked? I want the heading to return to its original state when clicked again or when another heading is clicked. Here&ap ...

javascriptjqueryhtmljquery-animate

Issues with dynamically adding or removing scroll in jQuery are not being resolved

I am trying to implement a dynamic scrolling feature in my post scenario. The goal is to automatically add a vertical scroll when the number of dynamic inputs reaches a certain threshold. Specifically, if there are more than 5 dynamic inputs created, a ver ...

javascriptjqueryhtmlcss

Conceal image and substitute with a different image using JavaScript

My query pertains to JavaScript: how can I create an effect where clicking the jump-down button opens a text box and causes the button to change direction and rotate? I am considering using two photos - one hides when the jump-down button is clicked, and ...

javascripthtmlcss

Angular - Javascript - Oops! The variable 'google' seems to have gone missing after reloading the page

For my website, I utilized Angular 2+ and integrated the Google Maps Api by adding the following code to my index.html file: <script async defer src="//maps.googleapis.com/maps/api/js?[myKey]&libraries=places"> </script> ...

javascriptangulargoogle-mapsvariablesgoogle-maps-api-3

Is it possible to loop through a subset of a collection using *ngFor?

Is it possible to iterate through a specific range of elements in a collection using *ngFor? For instance, I have a group of checkboxes with their form control name and label specified as follows: [{id: 'c1', label: 'C1'}, ...] Assum ...

javascripthtmlangulartypescriptangular-material

What is the process for capturing a window screenshot using Node.js?

I am currently conducting research to discover a way to capture a screenshot of a window using Node.js. I have been attempting to achieve this with node-ffi, but I am facing some difficulties at the moment: var ffi = require('ffi'); var user32 ...

javascriptnode.jsnpmuser32node-ffi

Elements separated by empty space on a Complex Grid, appearing distant despite the available space

Struggling with creating a complex layout using minimal relative and absolute positioning. Here's the issue I'm facing: All my elements are aligned side by side with only one problem: the border image needs to bleed into the row below. How can t ...

htmlcsslayoutsusy

Is there a way to broadcast a message to all the Discord servers where my bot is currently active using v14 of discord.js?

Can someone assist me in creating code that allows me to send a message to all servers at my discretion? I have not found any resources on this topic for discord.py or the newer versions of discord.js ...

javascriptnode.jsdiscord.js

Develop a React component that organizes an array based on specified index ranges in JavaScript

Imagine having an array structured like this: let numbers = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17, 18, 19]; I am interested in creating a React component that displays the elements of the array in groups of 10. The desired output should look like t ...

javascriptarraysreactjsdictionaryecmascript-6

Creating a mind map: A step-by-step guide

I'm currently developing an algorithm to create a mind map. The key focus is on organizing the nodes intelligently to prevent any overlap and ensure a visually pleasing layout. Take a look at this snapshot (from MindNode) as an example: Any suggestio ...

javascripthtmlcssalgorithmmindmapping

The state of the UI is not updating to reflect the selected item in React Native

I'm working on a component that needs to display all ingredients from my database, but I'm encountering issues with the state not updating as expected. Here are the variables: const image = require('../../assets/backgroundMeal.png'); ...

javascriptreactjsreact-nativestate

The absence of a property map within String Flowtype has caused an issue

There is an issue with Flowtype when it comes to arrays. type Properties = { films?: Array<any> } render() { const { movies } = this.props; return ( <React.Fragment> <main className="moviedata-container"> { ...

javascriptreactjsflowtype

Basic jQuery Slideshow Counter

I'm having trouble implementing a text-based horizontal slider on my website that scrolls left and right with mouse control. I want to display the current index of each slide along with the total number of slides (e.g. 1/4) and update the index as use ...

jqueryhtmlcsscarouselcounter

How can I activate a route without changing the URL in AngularJS?

Is there a way to activate a route and display a different view in Angular without changing the URL? I have integrated an Angular app into an existing website, and I prefer not to modify the URL within my embedded application, but would still like to mana ...

javascriptangularjsangularjs-routing

"Displaying the y-axis in d3.js: A Step-by-Step

I am a beginner in d3.js and I'm having trouble with my y-axis not showing up in the browser. Can someone please help me find a solution? var barOffset=5; var barWidth=50; var width=700,height=700; function processData(data,key){ var objects=[]; ...

javascriptjquerycanvassvgd3.js

Google Maps API Error: Marker Title Not Found

I am currently developing a map feature that allows users to click on it and generate new markers. These markers should display some information in the sidebar, including latitude, longitude, and a title. The issue I am facing is with the title of the firs ...

javascriptjqueryapigoogle-maps

Maintain original image file name when downloading

I have successfully created a download link containing a base 64 encoded image. The only issue is that I need to retain the original file name, which is dynamic and cannot be hardcoded. downloadImage: function(){ var image_url = document.getEleme ...

javascripthtml

Tips for retrieving the posted object in angularJS

My current challenge involves creating an object with a defined name, posting it into a database, and then immediately finding its position and obtaining its id. However, I have noticed that using "get" right after "post" retrieves the data before it' ...

javascriptangularjsrestactiviti

Having trouble with the $push operator in Mongo DB?

I am facing an issue while attempting to store data in an array within an object in a Mongo model by utilizing the req.params method. Unfortunately, I encounter the following error: MongoError: cannot use the part (friends of friends.username) to traverse ...

htmljsonnode.jsmongodbmongoose

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

javascriptjquerycsscookiesdocument-body