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

Prevent form submission when processing is in progress

I've got this code working perfectly: $(function() { $("input,textarea").jqBootstrapValidation({ preventSubmit: true, submitError: function($form, event, errors) { // additional error messages or events ...

javascriptjqueryformsvalidation

What is the proper technique for inserting a variable into the header portion of a v-data-table from a JavaScript file?

I'm currently developing an application using Vue.js with datatables. I need to display the headers of a v-data-table component, and ideally, I would like to pass a variable that can be dynamic based on the language selected on the page. Below is the ...

javascriptvue.jsdatatablefrontendvuetify.js

Ways to ensure the height of an element is consistent across various device modes

Testing out the angular-youtube-embed plugin with Chrome Dev tools' device mode, I wanted to see how the YouTube element would appear. Here's my code: <div class="fixed-header my-video"> <div style="padding:0px;"> <yo ...

javascriptcssangularjsyoutube-iframe-api

Creating a unique Vue.js modal window for every individual product

Currently, I am in the process of creating a small online store using Vue.js. Within this store, I have a variety of products each with unique names and prices. In order to provide more information about each product, I have included a "Details" button. M ...

javascriptvue.jsbootstrap-5modal-windowvuejs-slots

Utilizing sourcemaps in ionic for seamless linking

I've encountered an issue with source maps or a similar feature. After inserting console.log(...) in my code, the message appears in the console but links to the compiled JavaScript file instead of the original TypeScript file. Have I overlooked som ...

javascriptangulartypescriptionic-framework

What is the best way to create fancytree JSON structure with PHP?

Seeking assistance with using fancytree for the first time and experiencing challenges in generating a JSON result for fancytree. My database table contains columns for id, name, description, and parent_id. I am currently working on codeigniter and this i ...

phpjquerymysqljsonfancytree

Transfer a csv file from a static webpage to an S3 bucket

Looking to create a webpage for uploading csv files to an S3 bucket? I recently followed a tutorial on the AWS website that might be helpful. Check it out here. I made some modifications to accept filename parameters in my method, and everything seems to ...

javascriptamazon-web-servicescsvamazon-s3static-html

Leverage Reveal.js within Next.js by installing it as an npm package

I am currently working on a project that requires integrating Reveal.js with Next.js. However, I am having trouble displaying the slides properly. Every time I try to display them, nothing shows up. Even after attempting to display some slides, I still en ...

javascriptreactjsnpmnext.jsreveal.js

The marriage of ASP.NET Webforms and AngularJS

I am currently facing challenges in setting up my first ASP.NET WebApi / AngularJS application... I am attempting to access a WebAPI service (which I have developed and tested using Fiddler, confirming its functionality) from Angular, with the goal of dis ...

angularjsasp.net-web-apiwebformsasp.net-4.5

Tips for ensuring that the dynamic view updates correctly when the scope variable is modified

I am currently working on an Angular SPA where a $scope variable plays a crucial role in determining the content of a specific page. When a user clicks on a different link in the menu, parameters are passed through the URL, updating the scope variable. How ...

javascriptangularjs

Issue with firestore IN query when encountering NULL value

Is there a way to create a query that retrieves all documents without a value, whether it be null or ''? Within my table are three documents, each containing a field called a. https://i.sstatic.net/FGV0Z.png During an IN query, the document wit ...

javascriptfirebasegoogle-cloud-platformgoogle-cloud-firestore

Understanding how to properly handle the data sent by an ajax request in a NodeJS server

I currently have an array called passedWord = ['a', 'bbb']. I am then making an AJAX request to send this array to a Node.js server. Upon receiving the array on the server, Body Parser returns the following object: { name: 'abc&ap ...

javascriptajaxjsonnode.jsexpress

Utilize Python's TTP library to parse text and convert it into valid JSON

If we consider the text provided below: interface GigabitEthernet1/0/1.1 qinq stacking vid 10 pe-vid 100 qinq stacking vid 20 pe-vid 100 qinq stacking vid 30 pe-vid 200 # interface GigabitEthernet1/0/2.1 qinq stacking vid 20 pe-vid 200 # I am looking ...

pythonjsonparsing

The sorting of objects by Lodash is not accurate

My aim is to arrange objects based on a specific property (price). var arr = [{ name: 'Apple', price: '1.03' }, { name: 'Cherry', price: '0.33' }, { name: &apo ...

javascriptarraysobjectlodash

ReactJs: Struggling to programmatically set focus on an element with React.createRef()

Looking to detect when a user clicks on an arrow using the keyboard? I stumbled upon the Arrow Keys React react module. To make it work, you need to call the focus method on a specific element. Manually clicking on an element does the trick: https://i.s ...

javascripthtmlreactjsdomautofocus

What is the best way to alternate between displaying HTML content with v-html and plain text in Vue.js?

I need a way to switch between v-html and plain text in Vue.js v2. Here's what I have so far: HTML <div id="app"> <h2 v-html="html ? text : undefined">{{html ? '' : text}}</h2> <button @click=&qu ...

javascriptvue.js

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 ...

javascriptjqueryangularjsangularjs-directivejquery-ui-autocomplete

Update an item's precise orientation in relation to the global axis

Update: Included a jsfiddle for clarification: JSFiddle I am working with an object (a cube) in a scene and my objective is to provide it with 3 angles that represent its orientation in the real world. These angles are measured against the X, Y, and Z ax ...

javascriptthree.jsrotation

Retrieve the initial image from every JSON data point

Searching for a way to fetch the first image from each post in the JSON object? Check out the Tumblr API Documentation Currently, the provided code displays content from only the first post. The goal is to display the first image from all posts. $.ajax({ ...

jqueryajaxjsonapitumblr

Infinite rendering caused by React custom hook

I developed a custom hook that retrieves data from a News API and provides handling for loading, errors, and data (similar to Apollo Client). The issue I'm facing is that the hook seems to trigger infinitely, even when the items in the dependency arra ...

javascriptreactjstypescriptreact-hooks