If there are no spaces, text will be removed from my list group

While working on developing a forum, I encountered an issue where if I repeatedly input letters or words without any spaces, it causes everything to overlap. Below is an example highlighting this problem:

https://i.sstatic.net/KStNq.png

Although there is a character limit for both the title and body sections, the body has a limit of around 200 characters which I am hesitant to reduce.

<html lang="nl">
    <head>
        <title>WilliamOverman</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/css/style.css">
        <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4845455e595e584b5a6a1f041a0418">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </head>
    <body>
        <?php 
        include 'assets/header.php';
        require_once('assets/getInfo.php');
        ?>
        <div class="container">
            <div class="row">
                <div class="container col-md-6" style="margin-top: 1rem">
                    <?php
                    foreach (getPost()['posts'] as $item) {
                        echo "  <div class='list-group' style='font-family: Quicksand; margin-top: .5rem'>
                                    <a href='post?msgid=" . $item['id'] . "' class='list-group-item list-group-item-action' aria-current='true'>
                                        <div class='d-flex w-100 justify-content-between'>
                                            <h5 class='mb-1'> " . $item['titel'] . " </h5>
                                            <small>" . $item['bericht_create_date'] . "</small>
                                        </div>
                                        <p class='mb-1'>" . $item['bericht'] . "</p>
                                        <small>Posted by " . $item['username'] . "</small>
                                    </a>
                                </div>";
                    }
                    echo "
                    <div class='container col-md-8 text-center justify-content-center' style='margin-top: .5rem;'>
                        <a class='btn btn-primary' role='button' href='forum?page=1'><<</a>
                        <a class='btn btn-primary' role='button' href='" . prevpage() . "'><</a>
                        <a class='btn btn-primary' role='button' href='" . nextpage() . "'>></a>
                        <a class='btn btn-primary' role='button' href='" . lastpage() . "'>>></a>
                    </div>
                    ";
                    ?>
                </div>
                <?php
                if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) {
                    echo 
                    "<div class='container col-md-3' style='margin-top: 1rem'>
                    <form method='post' action='assets/postAddHandler'>
                        <div class='form-group'>
                            <label for='formGroupExampleInput'>Titel</label>
                            <input type='text' name='titel' class='form-control' id='formGroupExampleInput' placeholder='Example input'>
                        </div>
                        <div class='form-group'>
                            <label for='exampleFormControlTextarea1'>Bericht</label>
                            <textarea class='form-control' name='bericht' id='exampleFormControlTextarea1' rows='3'></textarea>
                        </div>
                        <div class='form-group'>
                            <label for='exampleFormControlFile1'>Foto</label>
                            <input type='file' name='foto' class='form-control-file' id='exampleFormControlFile1'>
                        </div>
                        <div class='form-group' style='margin-top: .5rem'>
                            <button type='submit' name='addPost' class='btn btn-success'>Add post</button>
                        </div>
                    </form>
                    </div>
                    ";
                }
                ?>
            </div>  
        </div>
    </body>
</html>

Answer №1

The reason for this issue is due to the absence of a defined behavior for handling oversized words. To resolve it, simply include word-break: break-all; in your CSS code.

Answer №2

To enable text wrapping, use word-break:break-all; or word-break: break-word;

Answer №3

word-break is a crucial CSS property to control text wrapping in browsers. By default, browsers try to keep words intact while wrapping text, but using word-break: break-all allows you to break long strings of text anywhere you like.

#word-break {
  word-break: break-all;
}

.list-group {
  font-family: Quicksand serif;
  margin-top: 0.5rem;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b2a9b7a9b5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="list-group" id="word-break">
  <a href="#" class="list-group-item list-group-item-action" aria-current="true">
    <div class='d-flex w-100 justify-content-between'>
      <h5 class='mb-1'> Example with word-break </h5>
      <small>Today</small>
    </div>
    <p class='mb-1'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
    <small>Posted by "Bob"</small>
  </a>
</div>

While word-break: break-all provides flexibility, it may cause actual words to be broken strangely. Keep in mind special considerations for Chinese/Japanese/Korean text. This property enjoys good browser support, barring Opera Mini compatibility.

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

Utilizing CSS for a responsive background image

While constructing a website, I encountered an issue where the client is using a mobile device and I want to prevent them from loading a particular background image. For larger screens, my plan is to incorporate approximately 5 images with different resolu ...

The proper method for incorporating a hover effect using CSS

Currently, I am facing an issue with integrating a hover effect to an image using CSS. The problem arises when the hover area is not aligned properly and the effect triggers even when the mouse is not directly over the image. <body> <div id=&apos ...

I'm a complete programming newbie and I want to start learning JavaScript, jQuery, and other programming languages. Where should I

Coming from a design background with zero programming knowledge, I have recently learned XHTML and CSS. Now, I am eager to expand my skills by mastering JavaScript, jQuery, and more. Where should I begin? This will be my first foray into programming. Whil ...

consistent height across the div when expanding

There is a recurring issue I encounter where it takes too long for me to solve the problem. My goal is to ensure that the bootstrap boxes at the bottom of the page have the same height. I attempted to set a fixed height in pixels using my CSS, but this cau ...

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

There are a total of 3 div elements and 3 links included in this setup. The goal is to only display one div at any given time. Upon clicking on a link corresponding to a different div, the current one should fade out while the selected one fades in seamle ...

Is it possible to adjust positioning using just CSS?

I'm attempting to arrange these elements as shown in the image below: https://i.stack.imgur.com/tWy1I.png https://jsfiddle.net/ut1mgcLb/ HTML <div class="object1"> <div class="snax-voting-container-body"> ...

Ways to align one child to the end without affecting any other elements

I'm attempting to position only div3 at the flex-end of .app. If I use this code: .app { display: flex; flex-direction: column; height: 100vh; justify-content: flex-end; } Div3 goes where I want it, but everything else also moves dow ...

Add a focus style to the submit button input

Having an issue with my CSS code. I can't get the style to apply to my submit button, but it works on the search field when focused. Please review my code snippet and screenshot below. What could be causing this problem? CSS .search-form .search-f ...

What is the best way to implement the popover function for multiple elements using jQuery in Bootstrap 5

I am facing an issue with Bootstrap5 popover and jQuery where I keep getting an error message that says: Uncaught TypeError: POPOVER: Option "content" provided type "undefined" but expected type "(null|string|element|function)" ...

Is there a way to command Chrome or Firefox to execute JavaScript or load a Bookmarklet directly from the command line?

Is there a way to execute javascript in the current browser window through the command line, either in Chrome or Firefox? Or is it possible to load a bookmarklet that includes javascript? I'm interested in creating a program that can monitor changes ...

When the text exceeds the designated block, it will be fragmented

I have always struggled with text elements not breaking when they exceed the boundaries of their parent element. I understand that setting a max-width of 100px will solve the issue, but it's not an ideal solution for me. I want the text to break only ...

Design a food selection with only CSS and HTML

I am working with a menu structure that looks like this: <ul class"menu"> <li> <a>item1</a> <ul> <li><a>subitem1</a></li> <li><a>subitem2</a></li> &l ...

Tips for positioning a div alongside its parent div

I have a unique setup with two nested divs that are both draggable. When I move the parent div (moveablecontainer), the child div (box.opened) follows smoothly as programmed. Everything works well in this scenario. However, when I resize the browser windo ...

Enhancing the internal styling of ngx-charts

While working on the ngx-charts Advanced Pie Chart example, I noticed that the numbers in my legend were getting cut off. Upon inspecting the CSS, I discovered that a margin-top of -6px was causing this issue: https://i.stack.imgur.com/oSho1.png After so ...

Can we retrieve the CSS of an element?

Using Selenium's webdriverJS, I have automated tasks on an HTML5 page. To incorporate a CSS selector into a function, I had to rely on XPath for selecting elements: var complexXpath = "//*/div/a"; /* This is just an example */ var element = mydri ...

Applying different styling to the same class within a different element using the + selector

Have you ever come across a website with code similar to what I've shared on this jsfiddle: https://jsfiddle.net/roa8k7js/ This particular site boasts an elaborate CSS styling sheet, exceeding 10,000 lines in length. When transitioning this website t ...

Exploring Techniques for Streamlining HTML/CSS Editing in Browser

Is there a way to automatically edit specific lines on websites right after they load? Specifically, I want to change <div class="1"> to <div class="1" style="display:none">, and <div class="2" style ...

Having trouble with your jQuery slideDown menu?

I am facing the exact same issue I had last week. Here is an example of my HTML code: <article class="tickets"> <div class="grid_12 left"> <div class="header"> <i class="ico ...

The CSS on the IIS 7 server is not functioning properly, unlike when it is on a

Upon debugging my ASP MCV 4 Application on Visual Studio 2012, I have encountered an issue with CSS not displaying properly after deploying it to IIS 7. It seems that some styles are missing in the live environment compared to how they appeared locally. I ...