Efficient segmentation of text using CSS and JavaScript

Currently, I'm involved in a project that allows users to create their own timelines with events. However, there seems to be an issue with the event titles.

Users are able to create events with extremely long titles, such as:

`12312312312312312312312313211233123213133gsfsfsfsdfserwerwerwerwesdfsdf`

or 

День победы русской эскадры под командованием Ф.Ф. Ушакова над турецкой эскадрой у мыса Тендра

The titles are displayed with h3 and a word-break: break-all property.

For instance, the first example might display fine. However, the second example does not adhere to proper hyphenation rules.

Are there any plugins or CSS techniques that can assist with this issue?

javascriptjqueryhtmlcss

Answer №1

Utilize in CSS. It's important to understand the distinction between when to use word-break and word wrap. Refer to the documentation and Stack Overflow link for more information.

 h3 {
   word-wrap: break-word;
 }

Documentation: W3school

Stack Overflow

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

Enhancing the appearance of a JSX component in React

I have a segment of code within my project that calculates a specific percentage and displays it on the dashboard. <text className="netProfit-circle-text" x="50%" y="50%" dy=".2em" textAnchor="middl ...

javascriptcssnode.jsreactjsecmascript-6

Exploring Ways to Loop through a JavaScript Map in Angular with ng-repeat

As I work on developing my Angular application, I encounter a situation where I have a Map object with keys and values (as demonstrated below). These key-value pairs in the map object (headerObj) are provided by the user as input to the application. var ...

javascriptangularjsangularjs-ng-repeat

Wrapping content in flexbox and aligning it justified

I have an issue where I want to display a page title on the left side and a rating number with stars on the right side. My goal is to center all items once flexbox wraps. Specifically, when the "Longer Page Title" reaches the rating and stars and the flexb ...

cssflexbox

Chrome experiencing problems with placeholder text fallback event

My text field has a placeholder text that says "First Name". When the user clicks on the field, the text disappears and allows them to type in their own text. HTML <input class="fname" type="text" placeholder="First Name"/> JS function handlePlac ...

javascripthtmlgoogle-chromeplaceholder

Retrieve data from database using ASP.NET and display it without any formatting or HTML tags

Being new to jquery and asp.net, I hope you can bear with me if my question seems too basic. Currently, I am working with a jquery autocomplete plugin that requires the data it retrieves asynchronously to be in a specific format of plain text: product1|pr ...

asp.netjqueryajax

Is there a way to trigger an animation to play in reverse without using a selector and then have it play normally on the :active state?

Trying to achieve the same animation effect using different selectors has been a bit challenging for me. Specifically, when I attempt to utilize the animation without a selector and then with the selector :active, the browser only plays the animation once ...

htmlcsscss-animations

What is an alternative way to show the contents of a JSON file without directly accessing it

Recently, I stumbled upon an amazing website - where I have been exploring to learn something new. The website prominently features the use of Ajax and some fascinating javascript without any additional libraries. Within a single javascript file on this ...

javascriptajaxjson

Combining Bootstrap with Rails

As I delve into the official documentation on incorporating Twitter Bootstrap in Rails, I stumbled upon an interesting tidbit: It mentions to eliminate all the *= require_self and *= require_tree . statements from the Sass file and opt for @import to im ...

cssruby-on-railstwitter-bootstrap

Troubleshooting the malfunctioning of the edit record feature in Python Django when using Jquery

Scenario: My HTML table displays data for a specific user with delete and edit buttons next to each row. While the delete button functions correctly, clicking the edit button does not trigger any action despite following a similar approach. This snippet o ...

pythonhtmljquerydjangoajax

Issue: Unauthorized access: nodeMailer despite correct configuration

Having trouble with an error when using the less app option on Gmail. I don't have 2-factor authentication enabled, and my credentials are correct. I can log in to my file to verify this, but the error still persists. const nodemailer = require(" ...

javascriptnode.jsemailnodemailer

Utilize CSS to align text to the right with floating properties

I have devised the following: Now, I want the 'independent' section at the top to be aligned to the right like the 'interactive' section. I attempted to use float: right; but it didn't work. Here is my code: .badgesblock{style: ...

cssruby-on-rails

Is there a glitch in my CSS code or am I simply misunderstanding how to center a div?

After doing some research, I noticed that all the tutorials I came across recommended following the same steps. However, when I implemented the code below: .center{ width: 50%; margin: 0px auto; } It centered all six items but didn't align them in 3 ...

htmlcsstwitter-bootstrap

Incorporating jquery.prettyPhoto results in the script being displayed on the webpage

When I relocate the following script: <script src="js/jquery.prettyPhoto.js"></script> To this location: <script type="text/javascript"> ... </script> The script starts displaying on the page starting from the bold section on ...

javascriptjqueryhtmlminifyprettyphoto

const React with several parameters

What is the recommended practice for parsing 2 parameters to a const in React? I am looking to use username and message instead of data. socket.on('updateChat', function (username, message) { addMessage(username, message); } const addMessag ...

javascriptreactjsparameterssocket.ioconstants

"Enhance Your Website with a Sticky Bootstrap Navbar and Seamless Scroll Design - Elevating Padding and Margin-

I am currently working on incorporating a bootstrap sticky navbar with a fixed height of 81px and smooth-scroll behavior into my project. The website's HTML structure includes section tags like <section class="section" id="news" ...

javascriptcsstwitter-bootstrapbootstrap-4smooth-scrolling

Can you share the specific equation used to calculate the size of a customized scroll bar thumb

I'm currently working on developing a custom scroll bar using HTML. Something along the lines of: <div class="demo"> <div class="content"> My content goes here </div> <div class="scrollbar"> <div c ...

jqueryhtmlcssscrollscrollbar

Tips for addressing the error message "Cannot PUT /":

I have been working on updating a local database using MongoDB for my project. Here is the code snippet I am using to update the data. The second part involves editing that redirects the updated data. I am not encountering any errors, so I am unable to i ...

javascriptnode.jsmongodbexpressmongoose

Choose a group of radio buttons inside a container when a button is clicked

I have a bunch of containers containing radio buttons. The goal is for the container of a selected radio button to appear different: input[type="radio"]:checked+.container { border: 5px solid red; } <div class="container"> <input class="btn ...

csshtmlcss-selectors

Is it possible to switch the value of a css property using jQuery without toggling

Can you provide an efficient way to toggle a CSS property value back and forth? I’m currently trying to address the CSS transition 0/auto issue. Here is my code snippet in JavaScript: jQuery(document).ready(function($) { var height = $('#men ...

jquerycsstransition

Create Duplicate DIVs Dynamically Using a Select Element

My form allows users to add passengers to a manifest. The number of DIV's displayed to the user depends on the number of people on the flight, selected from a select element. Despite researching browser forums and trying different methods, I haven&apo ...

javascriptphpmysql