Is there a way to add a disappearing large space that vanishes when a line break occurs?

I am currently working on a website where I aim to have the name and airport code displayed in a centered title above an image of the airport.

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

The name and code will be separated by an em space:

div.terminal-silhouette-container h3 {
text-align: center;
}

div.terminal-silhouette-links {
text-align: center;
margin-top: 5px;
margin-bottom: 40px;
}

div.terminal-silhouette-preview {
max-width: 500px;
padding: 0;
margin: 0 auto;
}

img.terminal-silhouette-preview {
border: 1px solid $color-border;
}
<div class="col-lg-6 terminal-silhouette-container">
  <h3>Orlando (International)&emsp;MCO</h3>
<div class="terminal-silhouette-preview">
      <a href="files/terminal-silhouettes/png/MCO.png">
        <img class="img-responsive terminal-silhouette-preview" src="/assets/projects/terminal-silhouettes/MCO.png" alt="MCO" />
      </a>
    </div>
  <div class="terminal-silhouette-links"><a href="files/terminal-silhouettes/png/MCO.png">png</a> &middot; <a href="files/terminal-silhouettes/svg/MCO.svg">svg</a></div>
</div>

While this setup works perfectly on larger screens, I encounter issues on narrower mobile screens where the title wraps and one line ends up appearing off-center due to the em space. Is there any way in HTML or CSS to make the browser treat the em space like a regular space, thus ignoring it when it comes to centering text at the end of a line?

htmlcss

Answer №1

To create some spacing around the name, wrap it in a span and set the margin-left to 20 pixels. For smaller screens, use a media query to remove the margin.

span{
    margin-left: 20px;
}
@media screen and (max-width: 500px) {
    span{
        margin-left: 0;
    }
}

Answer №2

To avoid overflow and wrapping of H3 titles in your CSS, consider making the following updates:

div.terminal-silhouette-container h3 {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

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

Setting various font sizes for a single element

I'm looking to enhance my text by incorporating an embedded font in addition to Arial as a backup option. However, the embedded font requires a larger font size compared to Arial. Is there a way to ensure that when displaying the same text element, A ...

htmlcss

How can I make Bootstrap fit my Custom Grid?

I have received specific measurements from a customer for a customized grid layout, and I am unsure of how to implement it. Here are the measurements provided: **Width: 320px** Sides: (26px) (2 sides) Column: (52px) (4 columns) Gutter: (20px) (3 gutter ...

htmlcssbootstrap-4

Clicking on the image "Nav" will load the div into the designated target and set its display to none. The div will

Can someone help me with loading a div into a target from an onclick using image navigation? I also need to hide the inactive divs, ensuring that only the 1st div is initially loaded when the page loads. I've tried searching for a solution but haven&a ...

javascripthtmljquery

What is the best way to reveal and automatically scroll to a hidden div located at the bottom of a webpage?

Whenever the image is clicked, I want to display a hidden div with effects like automatically scrolling down to the bottom This is what my code looks like: $(document).ready(function() { $('#test').click(function() { $(&apos ...

javascriptjqueryhtmlcsscodeigniter

The IntroJs step is only partially visible on the screen

Currently, I am incorporating introJS into my application and encountering an issue where one of the steps is only partially visible on the screen. Despite trying various position settings such as auto, left, right, etc., this particular item consistentl ...

javascripthtmlcssionic-frameworkintro.js

With jQuery fadeout, hyperlinks remain visible even after being clicked on

<a target="_blank" href="https://example.com"> <img class="bcvc_ad1" src="http://bdeas.com/wp-content/uploads/2015/08/ad1.jpg" alt="ad1" width="80" height="80" /> & ...

jqueryhtmlcss

CSS - Ensuring that the height of one div extends all the way down to meet another div

I'm facing an issue with two divs in my design. One of them contains a checkbox and the other has text which can vary in size - sometimes it's small, sometimes it's large. When the text in the second div is big, the box on the left extends a ...

htmlcss

"Troubleshooting: Why is Angular's Equalizer from Foundation not

I'm having trouble getting Foundation Equalizer (the JS tool for equalizing div heights) to function properly. The demo is not displaying correctly. I am currently using Foundation v6.1.2 My setup includes using it in an ng-view, and in the index fi ...

cssangularjszurb-foundation

li tag style

I need to insert a check mark inside the <li> tag on the right side. How can I do this? The check mark looks like this: For example: http://jsfiddle.net/HpVcy/ ul li{ padding: 3px 10px 3px 10px; background:url(http://img4up.com/up2/730897458613759 ...

htmlcss

Incorporate a lesson featuring jQuery into your curriculum

Just starting out with jQuery and I have a form setup like this: <select name= "menus"> <option value="">--Select--</option> <option value="a">a</option> <option value="b">b</option> <option val ...

jqueryhtml

The HTML file seems to be having trouble connecting to the JavaScript file

I am currently working on a small, fun website project and have an HTML file along with a JavaScript file in the same directory. However, my HTML seems to be unaware of the existence of my JavaScript file. It fails to execute the function during the load e ...

javascripthtml

Having trouble with the WordPress style file not functioning properly

I'm currently facing an issue while trying to upload a CSS file and a JavaScript file to a custom theme on WordPress. When I open the webpage, nothing appears and there are no elements displayed. However, when I delete the functions.php file, the webp ...

phpcsswordpress

Logging DOM elements with Electron's webview preload feature

Within my Electron program, I am utilizing a webview in my index.html file. The webview is equipped with a preloader, and my goal is to manipulate the DOM of the webview specifically, not just the index.html file. In my preloader code snippet below, the c ...

javascripthtmlwebviewelectron

Are there any tools you rely on for speeding up the process of developing html/css?

Have you heard of zen-coding? It's a script that generates markup based on a css-esque selector like this: div#foo > p*6 This code would generate: <div id="foo"> <p></p> <p></p> <p></p> & ...

htmlcssemmet

Recreate a null reference exception in a textbox following the action of clicking the Add button

How can I intentionally trigger a NullReferenceException in a textbox by changing its ID after clicking the Add button on the page? I have attempted to modify the textbox ID using developer tools before clicking the Add button, but the error is not thrown ...

htmlnullreferenceexceptiondeveloper-toolsobject-referenceradtextbox

A single image with dual clickable areas managed by an interactive image map

Is there a way to attach two href links to one image using CSS? I want it to function like an old school image map, but purely with CSS. Is this something that can be done? The current HTML code looks like the example below. However, I need the image to h ...

htmlcssimagemap

Is there a way to monitor the home button press event within a PhoneGap application?

Hello! I'm curious if there is a way to track when the Home button is pressed on both Android and IOS using phonegap phonegap build. I have looked into events for the home button press, but have only found information on back button events so far. ...

javascriptjqueryhtmlcordovaappframework

Tips for eliminating the PHP form redirection issue

Having trouble with data insertion in MySQL and getting redirected to the PHP file after. Not ideal! Any suggestions on how I can display error or success messages within the same HTML file? index.html <form id="form" action="add_article.php" method=" ...

phphtmlmysql

Is there a way to integrate both login and signup functionality into a single page in a Django application?

Is it possible to have both the login and sign up forms on the same page, enabling users to signup and login depending on which button was clicked? Here is an image of my registration page: enter image description here enter image description here Additio ...

pythonhtmldjangodjango-views

Footer positioned correctly with relative DIV

I find myself in a state of complete confusion. Coding is not exactly my forte, so I suspect I have made a significant error somewhere that is causing the following issue: My goal is to create a sticky footer. The footer does indeed stick to the bottom of ...

javascriptcsswordpresshtml