Strings that automatically adjust to fit the content from a JSON object

I have a JSON object with a long string that I want to display. The string looks like this: 

"String":"<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.</p>"

To load this value, I am using the following code:

data-ng-bind-html="getHtml(selectedCategoryData[indexOfSelectedData].String)"

The issue I am facing is that the entire string is displayed in a single line without any line breaks. This causes the text to be hidden when the device width ends.

I would like the string to autofit so that it automatically creates a line break when the device width ends, similar to how a normal <p> tag works.

Does anyone have any ideas on how I can achieve this?

javascriptangularjsjson

Answer №1

It seems like the problem is related to styling rather than JSON. To address this, you can experiment with applying the following CSS rules to the container:

display: block;
width: 100%;

If my suggestion doesn't resolve the issue, feel free to share a JSFiddle showcasing the problem for further assistance.

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

Retrieve the thousand separator for numbers using Angular in various languages

When using the English locale, numbers appear as follows: 111,111,222.00, with a comma as the thousand separator and a point as the decimal separator. In languages like German, the same number would be represented as 111.111.222,00, reversing the positions ...

javascriptangulartypescript

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

I need a button that can toggle (show/hide) a table. Currently, my code hides the table successfully, but it fails to show the table again when I click the button. It seems like there is an issue with refreshing or redirecting after clicking the button for ...

javascripthtmlcss

How to retrieve HTML attribute using D3 techniques

Looking to iterate through all rect nodes in the code snippet below: d3.selectAll("svg g rect") .on('mouseover', function (d) { console.log(this); }); When Console.log is executed, the following is printed: <rect class="cls" na ...

javascriptd3.jssvg

Tips for obtaining the correct Javascript output for the number pyramid

I'm currently in the process of creating a half pyramid of numbers, but I'm facing an issue with getting the output to show the total for each line while maintaining everything except the * sign between the numbers. If anyone is able to offer som ...

javascriptloopsfor-loop

The functions getFiles and getFolders will consistently retrieve a single file or folder each time they are

When attempting to fetch all files and folders from my Google Drive, the function .getFiles() is only returning one file, while .getFolders() is only returning a single folder. However, I can confirm that there are multiple folders and files in my drive. ...

javascriptgoogle-apps-scriptgoogle-drive-apiconstants

API does not support the grant type

I'm attempting to retrieve a token from the server response. It works perfectly fine using Postman, but when I try to debug it on Android, I encounter an error: unsupported_grant_type Below is my code snippet: HttpClient client = new DefaultHttpC ...

javaandroidjsonapitoken

JavaScript hovering drop-down feature

Hi there, I'm just starting out with javascript and could use some help with a simple script. I have a shopping cart drop down that currently activates when clicked. However, I want it to fade in when hovered over instead. I've tried using .hove ...

javascriptjquerycss

When a single object is entered, JSON returns 'undefined', however, it works successfully when using the .map() function

Utilizing Axios to fetch data from DeezerAPI, I initially rendered information using .map() and everything worked smoothly when passing it to a Component. However, when attempting to access a single JSON object, I encountered an 'undefined' error ...

javascriptjsonapi

Incorporating Javascript .click() with Python Selenium Webdriver for Enhanced Script Functionality

Having trouble incorporating Javascript code into my Python Selenium script. The ".click()" method in Javascript is more efficient than Selenium. I need to translate this Javascript into Python, but I'm not familiar with JS : const MyVariable= $(&quo ...

javascriptpythonseleniumselenium-webdriverweb-scraping

How to retrieve a string from a regular expression in Javascript without [Object object] output

Within my code, there exists a parent form component and a child component used for auto-completing text input. The Parent component passes an array of objects named autoCompTxt, consisting of name and id fields, to the Child component. //Parent: const [ob ...

javascripthtmlreactjsreact-hooks

Could you explain the distinction among req.path, req.params, and req.query?

I'm curious about the distinctions among req.path, req.params, req.query, and req.body in node.js. Can someone provide an explanation? ...

javascriptangularjsnode.jsjsonexpress

combine several arrays next to each other based on a specified key

I have a collection of three sets, each containing three elements: Set1 = [[apple, 2, 4], [banana, 5, 5], [cherry, 4, 1]] Set2 = [[banana, 1, 7], [cherry, 3, 8], [date, 5, 4]] Set3 = [[apple, 5, 2], [banana, 0, 9], ...

javascriptd3.jsplotly

Utilizing applets for JSON data conversion - a step by step guide

I am struggling to convert JSON data in my signed applet program using gson-1.4.jar. Despite signing the necessary jar and java class files, I am facing difficulty in converting the JSON data. Can someone please provide me with some samples to help me unde ...

javajsonappletgsonsigned

Tips for resolving a flickering issue that occurs when switching to an input field with our default value / placeholder plugin

In the realm of web development, numerous plugins cater to the implementation of HTML5's placeholder attribute in older browsers. The plugin we have opted for can be found here. Unlike some other alternatives, this particular plugin, with a few modif ...

javascriptjqueryhtmlplaceholder

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

Having some trouble. For example: $(document).ready(function () { $("#btnSend").click(function () { var noti_p = { url: "Pusher_Controller.ashx", data: "&appname=" + $("#selt1").val() + "&title=" + $("#title"). ...

javascriptjqueryhtmlajax

Trouble arises when managing click events within the Material UI Menu component

I've implemented the Menu Component from Material UI as shown below - <Menu open={open} id={id} onClose={handleClose} onClick={handleClick} anchorEl={anchorEl} transformOrigin={{ horizontal: transformOriginRight, vertical: t ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Leverage promises to alter reactive data, strategically placing them to minimize the frequency of triggers being activated

Initial Method const list = reactive([1, 2, 3, 4, 5]); const clickHandler = () =>{ list.push(...[11, 12, 13, 14, 15]); list.push(...[16, 17, 18, 19, 20]); Promise.resolve().then(() => { list.push(33) ...

javascriptvue.jsasynchronouspromisevuejs3

Stop images from flipping while CSS animation is in progress

I've been developing a rock paper scissors game where two images shake to mimic the hand motions of the game when a button is clicked. However, I'm facing an issue where one of the images flips horizontally during the animation and then flips bac ...

javascripthtmlcss

Transferring data between Jade templates

In the process of building a compact CMS system prior to diving into Node.js websites using Express, Jade, and Bootstrap, I encountered a minor setback. To enhance modularity, I am employing includes for various components like the navigation header on th ...

javascriptnode.jstwitter-bootstrapexpresspug