Is it possible to determine if a HTML element has word-wrap applied, causing a word to break in the middle of the text?

Inside a div, I have Persian text that wraps because I've used word-wrap: break-word; and the div's size is smaller than the text.

<div class="r25" style="width: 13.3333px; height: 50px;">
    <p style="font-size: 8px;">This is an example of a long text in Persian.</p>
</div>

I'm wondering how I can determine if word-wrap: break-word; has been implemented?

The phrase 

This is an example of a long text in Persian.
appears as follows:

This 
is
an
example
of
a
long
text
in
Persian.

These styles such as width, height, and font-size are set by a script. If the word breakup occurs within a word rather than at the end of a word, I want to apply a transformation.

EDIT:

An idea I have is to go through each word, calculate its width, and compare it to the div's width. However, I'm curious if there might be a simpler solution.

javascripthtmlcss

Answer №1

To encapsulate all the text along with its formatting, simply place it inside a div:

let $element = $("#myElement");
let newDiv = $("<div>" +$element.html()+"</div>");
$element.after(newDiv);

Next, determine the height of this newly created div and then delete it:

let newHeight = newDiv.height();
newDiv.remove();

By doing so, you can now calculate the number of lines present in the content:

let lineCount = Math.floor($element.height() / newHeight);

For more details, visit: http://jsfiddle.net/Lsqvmf8t/

Answer №2

One way to locate it is by utilizing the Browser Inspector

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

Cookies store their values within the document.cookie framework

My cookie contains the following data: emailID=a1%40a.comSEPmaths=0SEPphysics=0SEPchemistry=0SEPbotany=0SEPzoology=0SEPta mil=0SEPenglish=0SEPpolity=0SEPgk=0SEPhistory=0 However, when I use document.cookie.split('; '), it returns the encoded ve ...

javascriptphphtmlcookies

The outputstring encountered an issue with the HTML class

Struggling a bit with php, I'm trying to incorporate a basic comment system that accesses and writes to a comments.php file. Everything is functioning well until I attempt to style the $outputstring. Here's the code in question: $outputstring ...

phphtmlcss

I am unable to integrate Autoprefixer into an Express project

I am having trouble adding Autoprefixers to the postcssmiddleware, as mentioned in the documentation here I also attempted using express-autoprefixers but still cannot see the vendors in my dest or public folder. You can find a link to my repository (node ...

javascriptnode.jsexpresssass

jQuery validation does not work properly when using .element(element) in a custom method

I am struggling with a custom rule that is supposed to check dependencies by validating other inputs it relies on. However, when I implement this validation, it seems like all other validations are being ignored. Here is my custom validation rule: jQuery ...

javascriptjqueryvalidationjquery-validate

"Discovering the magic behind leaflet js's method of fetching tiles directly from

If you imagine tiles being stored in a file system similar to the image shown below https://i.sstatic.net/6NryK.png You can take a quick look at this URL Take a look at the code var map = L.map('map').setView([0, 0], 2); L.tileLayer(& ...

javascriptleaflet

Struggling with iterating over an Angular array?

I am attempting to iterate through this array. However, I am not seeing anything inside the {{repeat.title}} I am iterating through the array using the following HTML/Angular code: <div class="column inline inline-4 center choice" ng-repeat="repeat i ...

javascriptangularjsmultidimensional-array

What is the reason behind TypeScript's decision not to raise an error in case of a mismatched function argument type?

Here's a simple illustration to showcase my point: type Info = { id: number; } type ImportantInfo = { id: number; value: 5; } type Task = (data: Info) => void; const task: Task = data => null; const data: ImportantInfo = { i ...

javascripttypescript

Generating static HTML files from Node/Express views during the construction process

Seeking clarification on my terminology. My Node/Express server currently provides Jade template files for my AngularJS app. Transitioning to a live deployment, I am required to run the app with Apache using static files instead of dynamic Jade views. Is ...

javascriptnode.jsexpressgulppug

Passing Data from $http.get to Angular Controller Using a Shared Variable

One issue I'm facing is the inability to pass the content of a variable inside $http.get() to the outside scope, as it always returns undefined. I attempted using $rootScope, but that approach was not successful. controller('myControl', fu ...

javascriptangularjsangularjs-directiveangularjs-scope

Is there a way to narrow down the font choices using HTMLPurifier?

- Currently in my project, I have incorporated an HTML-WYSIWYG Editor that allows users to utilize various Webfonts for styling their texts. The editor I am utilizing can be found at NiceEdit. It generates code snippets such as: <font face="c ...

phphtmlfontswysiwyghtmlpurifier

Tips for showcasing chats with the most recent message highlighted

As I work on my web app using Laravel, I have encountered an issue where I need to scroll down to see the newest messages when there are many conversations. Here is how the chats display on page load I want to focus on displaying the newest message first. ...

javascriptcsslaravel-5bootstrap-4

Change to a dark theme using React hooks in typescript

Hello, I am new to React and English is not my first language, so please excuse any mistakes. I have been trying to enable a dark mode feature on my website. Most examples I have found involve toggling between dark and light modes where you need to specify ...

javascriptcssreactjstypescript

What is the best approach for managing a response that lacks a body?

My current issue is that jQuery is attempting to parse the response body as JSON, but since the body is undefined, it causes an error. I am unable to modify the response, as this is the default response from Jenkins servers. It returns a 201, 404, or 500 ...

javascriptjqueryhtmlajaxpost

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

javascriptjqueryhtmlcss

Error: foobar is not defined within this scope (anonymous function)

I'm facing an issue with a JavaScript file hosted on a domain called foobar.com. at http://foobar.com/static/js/main.js: $(document).ready(function() { function foobar(bar){ $.ajax({ url: "/site/foo/", ...

javascriptjqueryajax

Tips for effectively logging data retrieved through Ajax requests

When I have content loaded via Ajax with two divs and a list, my goal is to console.log which div I was typing on when clicking on a list item. However, the issue I'm facing is that I always get the first one I clicked until I refresh the page. Altho ...

javascriptjqueryajax

Wait for the canvas to fully load before locating the base64 data in HTML5

Wait until the full canvas is loaded before finding the base64 of that canvas, rather than relying on a fixed time interval. function make_base(bg_img, width, height) { return new Promise(function(resolve, reject) { base_image = new Image(); base_imag ...

javascripthtmlhtml5-canvas

Ways to determine whether one side of a selected div is not obstructed by other divs

I am working with some div elements that are all sized 100x100px: Below is the HTML code for the 3 blocks: <div id="plane"> <div class="tile tile3" block-id="1" style-id="3" style="left:50px; top:50px"></div> <div class="tile t ...

javascriptjqueryonclickoffsettypeof

Angular input field displaying X

Hey everyone, I'm currently working with Angular and typescript. I have a requirement to hide the first 8 characters that the user enters and only show the remaining 4 characters. Update: I have included a link to the Stackblitz demo Stackblitz <i ...

javascriptangulartypescriptstring

Finishing a division by both clicking outside of it and pressing a button

I am currently working on setting up a dropdown menu that can be closed both by clicking outside the opened div and by clicking the button or image that opens the div. Image with onclick function: <img onclick="hide()" id="menu" src="...."> Th ...

javascriptjquerycssonclickaddeventlistener