Implementing automatic line breaks in Bootstrap

When setting the "overflow scroll able" option, I want it to only allow scrolling in the y direction and if x content overflows, a line break should occur.

I tried applying 'white-space', but it didn't work as expected.

<ul class="sidebar-menu scrollable" style="height: calc(100% - 130px);">
        <li class="nav-item">
            <a class="sidebar-link">
                <span class="title">
                    <div id="desc-viewer" class="desc-viewer" style="">
                         <!-- markdown datas... -->
                         <!-- example data -->
                         <pre class="prettyprint linenums">
                            <code>
                                Test syntax! Test syntax! Test syntax! Test syntax! Test syntax!
                            </code>
                         </pre>
                    </div>
                 </span>
            </a>
        </li>
    </ul>

This code is causing overflow-x to create a scrollbar.

javascriptjqueryhtmlcssbootstrap-4

Answer №1

If you need to break words in a paragraph, you can utilize the word-break property.

.alas {
  word-break: break-all;
}
<p class="alas">Hi,Thisisme.Hi,Thisisme....(repeated multiple times)...Thisisme.</p>

Answer №2

Using the word-break property can help solve this issue.

p {
  overflow-wrap: break-word;
}
<p>VDAAAAAAAAAAJCAJANVAKVJNAKVAKVNAKVNAKVAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAVANVALKVMAJLIILVEAJAJALVNALIVNALKVAKLNVANAKLVNANAVLJANVLAKSVSAKLVASKLVAKLVALKVAKNVAS</p>

Answer №3

When using the <pre> tag to wrap your text, consider applying white-space: pre-wrap;

To eliminate the leading tab, you can experiment with white-space: pre-line;

#pre-wrap {
    white-space: pre-wrap;
}

#pre-line {
    white-space: pre-line;
}
<div id="desc-viewer" class="desc-viewer" style="">
     <pre id="pre-wrap"class="prettyprint linenums">
        <code>
        Test syntax! Test syntax! Test syntax! Test syntax! Test syntax! est syntax! Test syntax! Test syntax! Test syntax! Test syntax! est syntax! Test syntax! Test syntax! Test syntax! Test syntax!
        </code>
     </pre>
     
     
       <pre id="pre-line" class="prettyprint linenums">
        <code>
        Test syntax! Test syntax! Test syntax! Test syntax! Test syntax! est syntax! Test syntax! Test syntax! Test syntax! Test syntax! est syntax! Test syntax! Test syntax! Test syntax! Test syntax!
        </code>
     </pre>
</div>

Answer №4

To ensure that long words do not break out of their containers, you can utilize the CSS property word-wrap:break-word.

div {
  word-wrap: break-word;
}
<div>
  <p>DSCSNKCSKCSCMSKCSKCSKCNSKCNSKCNKSCNSKCNSKCNSKCNSKCNSKCNSKNCKSCNKSNCKSCNSCNKSKCSNCKSKNCSKNCSKCNKSKCNSKNCSKNCKSNCSNKCKCNNSKCNSCNKSCNKSNCK</p>
</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

Expansive menu that stretches the full height of the webpage

I'm having difficulty making my side spry menu extend the full length of the webpage. I tried using this code: $("nav").css({ "height" : $("nav").height() }); but it still isn't working as expected. I just want the grey color, like ...

javascriptjqueryhtmlcss

Using my function to iterate through all 'li class' elements on an eBay Scraper page

Just getting started with Python and BeautifulSoup. I'm facing an issue with implementing my function on all the list items (li class) on a specific eBay page that shows sold items. Each sold listing appears as an li class. Here is the URL for refer ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

Can the output of the "npm run build" command, which consists of static files, be transformed back into a fully functional project?

I possess static JavaScript build files without access to the source code that produced them. Unfortunately, the previous developer is no longer around to provide insight. Is there a way to deconstruct these files? ...

javascriptnode.jsreactjs

Page for users to login using React

Struggling to create a login page in React due to the asynchronous nature of setState. Upon submission, the state is not updating with form values, only displaying old initial values. How can I ensure that the submit function receives the new values? Is ...

javascriptreactjs

Executing an Amplifyjs GET request containing a request body

Is it possible to utilize GET requests with a message body using AmplifyJS? Specifically, I am curious about the process of achieving this functionality with AmplifyJS. While synthetic tests function properly (using Fiddler as my test client), I have enc ...

javascriptjqueryajaxgetamplifyjs

What is the most effective method to exhibit every element within a content wrapper at a specific interval of time?

I am looking for a way to display each div within the content-wrapper after a specific time interval. Currently, I am using individual classes like el1, el2, el3, ... to accomplish this task. However, when dealing with content-wrappers containing multipl ...

javascripthtmljquerycss

Fill Dropdown Menu Using Data Retrieval From Database

I am trying to figure out how to populate a drop down list (also known as a Select element) with data from a SQL Server query. The goal is to fill the list with results from Select storeName from storeinfo, which should give around 30 items that I want di ...

phpjqueryhtmlajax

There was an error in parsing the JSON data due to an unexpected token "u" at the beginning of the string

I've been working on improving my JavaScript skills, but I hit a snag with an error message that reads "Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse". var requestData = new XMLHttpRequest(); requestData.open('GET& ...

javascriptjson

Issues with Angular functionality

I'm a newcomer to Angular and I am trying to recreate this example from jsfiddle in order to experiment with nodes. However, I am encountering issues with the Angular setup. Firstly, the jsfiddle is causing confusion because the application names do n ...

javascriptangularjs

The presence of a display block property within a div contained inside an li element results in extra whitespace

I am presenting the code below: <div class="settingsMenu" style="top: 135px; left: 149px; display: block;"> <ul> <li class="download" onclick="downTemplate('template1')">Download</li> <l ...

csshtmlhtml-lists

Parsing JSON data to extract values stored in a two-dimensional array

In order to develop a basic version of Tic Tac Toe, I decided to store game data in a JSON file. Here is an example of how the file is structured: [ { "turn": "x", "board": [ [ " ...

javascriptarraysnode.jsjson

Does MySQL Workbench automatically convert camel case attributes?

I'm curious to understand something. I defined an attribute called userId, but in MySQL Workbench it shows up as user_id. Is this usual? @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name= "userId") private ...

htmlmysqlspring-boothibernatemysql-workbench

What is the best way to remove every other second and third element from an array?

I am looking to remove every second and third element of an array in Javascript. The array I am working with is as follows: var fruits = ["Banana", "yellow", "23", "Orange", "orange", "12", "Apple", "green", "10"]; My goal is to delete every second and ...

javascriptarrays

Apply a custom filter to ng-repeat results

Asking for advice on how to iterate over an array using ng-repeat and filter the contained objects based on a function property. Find more details in this Plunker link. Let's say we have an object like this: vm.show1 = function(){ return true; }; ...

javascriptangularjsfilter

Exploring File Read and Write Functionality in Angular 4

I want to develop an offline Task List in Angular 4. However, I am facing difficulty in finding a method to save data in a file on the client side using JavaScript or Angular. My current approach involves using browser's localStorage, but it is slow ...

javascriptangularfilelocal-storage

Get rid of Jquery from the element and then apply it again?

I have implemented the wickedpicker plugin on a page that contains 2 time fields. I am struggling to update the time in each field separately when a button is clicked. It seems like the script is already bound to the input element which is causing issues ...

jquerybindreloadwickedpicker

Express.js is unable to redirect to a customized URL scheme

I'm currently having an issue with redirecting users to a custom URL scheme using Express.js in order to launch an app on my iPad (using "example://"). Below is the code I have written to handle the redirection from a button press on a page hosted on ...

javascriptnode.jsexpress

Using electron cookies in Angular involves integrating Electron's native cookie functionality into an

I am currently dealing with electron and looking to implement cookies conditionally in my project. If the application is built using electron, I want to utilize Electron Cookies; otherwise, I plan to use Angular Cookies. However, I'm encountering diff ...

javascriptnode.jsangularcookieselectron

Alert: Converting an array to a string may result in unexpected behavior

I am currently working on implementing pagination and encountered an error. This is my first time working with this, so any help would be greatly appreciated. Thank you! try { // Determine the total number of items in the table $total = $con -> ...

phphtml

How can I prevent the angularFire $add(user) method from duplicating records? Is there a way to ensure that firebase records remain unique?

I need help preventing duplicate records in AngularFire when adding users to my database. How can I ensure that a user is only added once, without creating duplicates? Here is an example of the button I am using: <a class="btn btn-block btn-lg btn-suc ...

javascriptangularjsfirebaseangularfire