The substance (singular word) extends beyond the margins of the mobile screen

I am facing an issue on my webpage where the title is too long and it goes out of the page on mobile devices.

Here is an example:

<div class="module-head"><h3 class="module-head-title">Search Engine Optimization - Why Is It Worth It?</h3></div>

    .module-head {
    text-align: left;
    /*position: relative;*/
    margin: 40px 0;
}
.module-head-title {
    color: var(--main_purple_color);
    font-weight: 800;
    font-size: 2.5rem;
    display: inline-block;
}
.module-head:after {    
    content: "";
    display: block;
    background:  var(--main_red_color);
    width: 220px;
    max-width: 260px;
    height: 3px;
}

Here is a photo illustrating the problem: https://i.sstatic.net/Vsumx.jpg

What should be done if I prefer not to reduce the font size?

htmlcssbootstrap-4

Answer №1

Although I may not understand the language on that website, there is a clever way to break words using a special entity known as a "soft hyphen," &shy, placed within the word at the appropriate spot to ensure it only breaks when necessary due to space constraints.

For example, take a look at this lengthy nonsensical word both with and without a soft hyphen:

<h2>Runununufanlaerlknadlknalknaelknalkneflknalkneflknaelfknaelfknaeflknaelfknoaeiruodiulsk</h2>
<h2>Runununufanlaerlknadlknalknaelknalkneflkn&shy;alkneflknaelfknaelfknaeflknaelfknoaeiruodiulsk</h2>

<h3>The same word including the soft hyphen, but with a smaller font (fits into one line, therefore it's not being broken by the soft hyphen):</h3>
<p>Runununufanlaerlknadlknalknaelknalkneflkn&shy;alkneflknaelfknaelfknaeflknaelfknoaeiruodiulsk</p>

If the available horizontal space allows, the word will remain intact; otherwise, it will gracefully split at the designated soft hyphen point.

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

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...

javascriptcsstwitter-bootstrapangulartypescript

JavaScript - Placing Image Caption and Details within a Box

<div id="CollectionALL"> <div id="collection1" class="col"> <img id="Img1" class="imageCS"/> <H1 id="Title1"></H1> ...

javascripthtmlcss

There seems to be a white space problem located beneath the header photo and the initial

I'm a beginner at coding and working on this project for fun. I'm almost done, but I can't get rid of a white space that's dividing my header from the first section. See the screenshot below: https://i.stack.imgur.com/a1flt.png Even af ...

htmlcss

Stopping the <nav> element from displaying as "unlabeled section" on HTML5 webpages

As I work on incorporating proper sectioning in HTML5 with sectioning elements and headlines to meet my customer's design goals (while adhering to certain restrictions), I have encountered a challenge. The basic layout requested is as follows: <b ...

htmlnavigationsemanticsnav

When using HTML and PHP, do note that the function mysql_fetch_array() requires the first parameter to be a resource and

I'm currently working on developing a feature for our website that allows users to search for banned usernames on our servers. The idea is to create a simple form where users can enter the username they want to check and then display any matching resu ...

phphtmldatabasesearchtextbox

Expanding and hiding content using jQuery while also utilizing cookies for persistence

Hey there! I have a piece of code that I'm working on and could use some help. I'm trying to create a cookie that can remember the current state of a div even if the user reloads the page. Any assistance would be greatly appreciated! jQuery(fun ...

htmlcookies

Mastering the Art of Tab Selection with Jquery

I am trying to implement a tabs control using jQuery. Here is the HTML code I have: <div id="tabs" class="news1"> <ul> <li><a href="#tabs-1">Track</a></li> <li><a href="#tabs-2">History&l ...

javascriptjqueryhtml

Should I implement this practice when developing an AJAX website? Is it recommended to enable PHP code within .html files, or should I switch to using .php files instead?

Query: I am interested in executing PHP within HTML documents to include HTML using PHP include();. Question: Would it be more beneficial to change .php to .txt for my AJAX-loaded pages and switch my .html files to .php? This approach might resolve the ...

javascriptphphtmlajax

Modify the default navbar from Bootstrap to display as a fixed navbar

Is there a way to change my default navbar into a fixed navbar when I scroll? I have tried adding data-spy="affix" data-offset-top="200", which works but doesn't look quite right. Should I create a new CSS class or is there an easier solution availab ...

jqueryhtmlcsstwitter-bootstrap

There seems to be a problem with how the navbar is being displayed in ResponsiveSlides.js

I am currently using WordPress, but I have come here seeking help with a jQuery/CSS issue. I am utilizing responsiveSlides.js to create a simple slideshow, however, when viewing it here at gallery link, it appears that something is not quite right. STEPS: ...

javascriptjqueryhtmlcsswordpress

I am looking to superimpose one rectangle over another rectangle

I am looking to create something similar using CSS and TypeScript/JavaScript: Could someone please guide me on how to achieve this? My attempt with a flex container looks like this: I am new to front-end development. Can anyone point out what I might be ...

javascripthtmlcssreactjstypescript

Tips for leveraging a button to trigger server-side actions

Being a novice in web development, I'm currently working on a straightforward website that enables users to download files from the server side. These files are not pre-created; instead, there will be a button on the HTML page. When a user clicks this ...

javascriptjqueryhtml

With FlexLayout, the content compresses rather than shrinking and taking up the entire width

When utilizing Angular and the flex Layout to develop a dashboard, I am encountering an issue where the items do not shrink as expected when opening the navigation. This results in the last item being pushed to the next line. Below is the HTML for the pare ...

htmlcssapexcharts

IE has trouble with CSS inline-block and width-auto styling, leading to incorrect rendering

Recently, I've noticed a strange behavior in Internet Explorer 9-11 and Edge (Spartan). In all browsers except for IE, my example displays as desired: However, in Internet Explorer, it looks different: I used to encounter this issue on multiple bro ...

htmlcssinternet-explorercross-browserwidth

Interactive pop-up window featuring a top section, main content, and bottom section

I have a situation where I've created a modal with sticky headers and footers, and the middle section scrolls based on the content. Everything looks great on Desktop, but when viewed on mobile or tablet devices, the footer is stretched and not fully ...

htmlcssmobilesassresponsive

Stylish Tabbed Design

Imagine I have this html and css snippet h1{ color: rgb(61, 133, 200); font-size: 3em; margin-left: 0px !important; } h1 ~ *:not(h1) { margin-left: 0px; } h2{ font-size: 1.8em; margin-left: 40px !important; } h2 ~ *:not(h2) { ...

htmlcsslayout

Altering the background color of :after while :before is being hovered over

Is it possible to modify the :after section when hovering over the :before part? Take a look at this image for reference: I want to alter the small triangle shape when the large square is being hovered over. The square uses the :before pseudo-element and ...

css

Tips for creating a responsive image with a gradient overlay

Having trouble articulating my query, so here's a fiddle: https://jsfiddle.net/8zsqydj0/ .background-img-wrapper:before { content: ""; top: 0; left: 0; position: absolute; height: 100%; width: 100%; background: linear-gradient(to righ ...

htmlcsstwitter-bootstrapbootstrap-4linear-gradients

Sleek and versatile sidebar reaching full height

Is there a way to make my sidebar cover the full height of the screen without using position: fixed? The code I've tried doesn't seem quite right. Any tips? JSFindle: http://jsfiddle.net/Pw4FN/57/ if($(window).height() > $('#page-contai ...

cssresponsive-design

The NgModel function within *ngFor is executing more times than necessary during initialization

Displayed on screen are a list of tutorials with check boxes next to each tutorial's states. These tutorials and states are pulled from the database, each tutorial containing a name and an array of associated states. Here is the HTML code: <div c ...

htmlangulartypescriptloopsangular-material