My word cannot be bring to the next line after exceeding the code i looked at the inspect it stated that the paragraph still in the same line after exceeding the line.
i had tried to insert the function for limiting the word in a line but still cannot do it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Discussion</title>
<style>
/* CSS for enlarging the discussion box and adding a "View More" button */
.forum-discussion {
border: 1px solid #ddd;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden; /* hide overflow */
transition: max-height 0.5s ease;
position: relative;
padding: 20px; /* Added padding */
margin-bottom: 20px; /* Added margin-bottom */
}
.forum-discussion {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 1190px;
max-height: 240px;
margin-top: 2%;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
}
.forum-discussion.with-view-more-space {
padding-bottom: 20px; /* Extra space for the button */
}
.subforum-description {
overflow-wrap: break-word;
}
.forum-discussion .subforum-description {
max-width: 600px; /* Adjust as per your design */
margin-bottom: 20px;
margin-right: 20px;
overflow-wrap: break-word; /* Handles long words */
position: relative;
}
.discussion-image {
max-width: 100%; /* Ensure image does not exceed the container's width */
height: auto; /* Maintain aspect ratio */
display: block; /* Center the image if needed */
margin: 10px auto; /* Center the image horizontally */
}
.expanded {
max-height: 3000px; /* arbitrary large value to show full content */
}
.subforum-nickname {
margin-left: 5px;
font-weight: bold;
font-size: 18px;
}
.subforum-date {
margin-top: 10px;
}
.subforum-nickname,
.subforum-title {
font-weight: bold;
font-size: 18px;
}
</style>
</head>
<body>
<div class="forum-discussion with-view-more-space">
<div class="discussion_profile_image">
<img src="profile-image.jpg" alt="Profile Image" class="profile-image">
</div>
<div class="subforum-nickname">Username</div>
<div class="subforum-title">Discussion Title</div>
<div class="subforum-description">
<h1>Discussion Content</h1>
<p>Data is a valuable resource for retailers, so protecting it is extremely important. Traditionally, this data needs to be retrieved manually, which is time-consuming and requires constant maintenance. With cloud recovery, you can retrieve important data in a timely manner. In addition, local server failures, power outages, or natural disasters can also lead to data loss. Traditional data recovery is time-consuming and sometimes expensive. However, with the help of cloud technology, data can now be viewed and restored from any location. Disaster recovery and backup can be performed anywhere, and the entire process can be automated. Retailers can take advantage of cloud disaster recovery models to safely store data and access it at any time without worrying about data loss. (Cogs, 2024)</p>
</div>
</body>
</html>
overflow-wrap: break-word; /* Handles long words */
*I had inserted the break-word function still cannot bring it down