Ways to implement CSS styling for a particular HTML element

HTML: 

<div class="tagline">Web Portal Name</div><br />
        <div id="logged_in_user_dtls" style="color:#FFF; margin-top:15px; font:bold; width:100%; position:relative; margin-left:800px;float:left;">

      <span> Welcome <?php echo $_SESSION['userName'] ?> </span>
       | <a href="login.php"><span> Sign Out</a> </span> </div>

When setting up my web template, I include the logged-in user's name followed by a welcome message.

Issue: When the user name is long (around 30 characters), the "Sign Out" link shifts to the right-hand side.

How can I prevent this movement of the "Sign Out" link to the right side? I have attempted adjusting the margin-left property, but it affects my overall alignment.

Update: Is there a way to keep the position of the "Sign Out" link fixed regardless of the length of the user name?

htmlcss

Answer №1

Limit the width for lengthy usernames and add an ellipsis to indicate overflow:

<span class="username"> Greetings <?php echo $_SESSION['userName'] ?></span>

CSS

.username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: x px; /* adjust as needed */
}

Answer №2

#user_info_details span {
   width: 200px; /* customize as needed*/
   display: inline-block;
   overflow: hidden;
}

By implementing this code, the lengthy parts of the name will be truncated. To prevent this, simply remove the overflow:hidden; property.

Answer №3

Give this a shot:

span{
text-overflow: ellipsis;
max-width:xx px;
overflow:hidden;
display:inline-block;
}

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

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

Troubleshooting the issue of autoplay not functioning in HTML5 audio

I'm facing a strange issue with my code - the autoplay feature for audio is not working as expected. Typically, whenever I insert this particular piece of code into a website, the music starts playing automatically. However, it seems to be malfunctio ...

javascriptcsshtmlaudio

Incorporating a jQuery word count and limit within PHP code: a step-by-step guide

I am encountering an issue with a textarea count code. It functions perfectly on its own but when I integrate it as shown below, it stops working without throwing any errors. I have been trying to resolve this for more than 3 days now. Any assistance would ...

javascriptphpjqueryhtml

Building a 3D Earth model using three.js for WebGL applications

I found a code online, but it doesn't seem to work. Can someone provide me with the HTML code needed to make it run in my browser? The original code was sourced from this website (github repository) Github code repository https://github.com/turban/ ...

javascripthtmlthree.js

The margins are not being maintained by the columns

Currently, I am using Bootstrap 3.3.7 and facing an issue with the alignment of smaller columns in relation to bigger columns. To see a demo, click here. I have set a margin of 10px between the columns. For example, the first row consists of the followin ...

htmlcsstwitter-bootstrap

Tips for aligning a Bootstrap container in the middle of the viewport vertically

I'm struggling to center a Bootstrap container vertically in the viewport. You can view my code at http://www.bootply.com/C8vhHTifcE All of my attempts at centering have been unsuccessful. Does anyone have a solution? Just to clarify: I want the co ...

htmlcsstwitter-bootstrap

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Using Ajax to dynamically load page content into a div based on a selection made in a

How can I dynamically load content into a div using Ajax based on the selection made in a dropdown menu? For example, I have a select box with two options: test.HTML and test1.HTML. Below that, there is a div where I want to display the content from eithe ...

jqueryajaxhtml

Is it possible to generate a unique name from an array without any repeats?

Update: I am not looking to create a single list, but rather a button that generates a random name when clicked. Objective: Generate a random name from an array by clicking a button. The goal is to display one name at a time randomly without repetition. W ...

javascriptjqueryhtmlarraysrandom

Instant Pay Now Option for Your WordPress Website with PayFast Integration

I have encountered an interesting challenge that I would like some guidance on. My goal is to integrate a PayFast "Pay Now" button into a Wordpress.com blog, specifically within a sidebar text widget. The tricky part is that I need the customer to input th ...

javascripthtmlwordpress

exciting, showcasing a dependency map using svg within an html5 environment

I am working on creating a polygon background for my menu, which needs to be responsive in design. Here is an example of what I am trying to achieve: example image. Should I use JavaScript to listen for size changes and adjust the points for the polygon e ...

javascriptcsshtmlsvgtwitter-bootstrap-3

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

javascripthtmlcsscss-transitionscss-animations

Issues with the functionality of the bootstrap modal jQuery function in Firefox, causing problems with scrollbars and dynamic modal height adjustments

My newly launched website is built using bootstrap v3 and modals to showcase detailed information about each game server that is queried. Each modal provides insights into the current players on the server, their score, and play time. While implementing ...

jquerycsstwitter-bootstrap-3bootstrap-modal

Linking a background image in the body to a specific state in next.js

My aim is to create a pomodoro timer using Next.js and I'm trying to link the body's background image to a state. However, my code isn't functioning properly. This is the code I used to update the body style: import { VscDebugRestart } from ...

javascriptcssreactjsnext.js

Is there a way to adjust the scrolling speed of a background image to be slower than the rest of

I'm searching for an example similar to this: Are there any efficient javascript solutions available? I've had difficulty implementing the code I've come across so far. ...

javascripthtmlcss

Tracking mouse positions across an HTML document

I've been working on a project inspired by the voxel painter example on the three.js page. In this particular example, the mouse coordinates are utilized to move a roll-over helper that indicates where a box will be placed upon click. mouse.set((even ...

javascripthtmlcanvasthree.js

Deactivate the button until the input meets validation criteria using Angular

What I'm trying to achieve is to restrict certain input fields to only accept integer or decimal values. Here's the code snippet that I currently have: <input type="text" pattern="[0-9]*" [(ngModel)]="myValue" pInputText class="medium-field" ...

htmlangulartypescript

What is causing find_by_css to return nothing when using nth-child?

Currently, I am facing an issue when trying to extract the "href" link from the following HTML code: https://i.stack.imgur.com/Gtzf4.png This is the code that I'm using: from selenium import webdriver from splinter import Browser from bs4 import Be ...

pythoncsspython-3.xseleniumbeautifulsoup

Struggling to close modal popup after submitting form

click here for imageCurrently, I am working with the bootstrap modal plugin to create an inquiry form. The issue I am facing is that even though I am using the "ng-submit" directive to save the form details, when I click submit, the form submits successful ...

javahtmlangularjs