I require displaying the initial three letters of the term "basketball" and then adding dots

  • Just starting out with CSS and struggling with the flex property.
  • Seems to work fine at larger sizes, but when I reduce the screen size to 320px, I run into issues...
  • Can anyone help me display only the first three letters of "basketball" followed by dots?
  • Desired output: Bas...
  • I've tried various properties without success. How do I fix this issue related to flex?
  • Sharing my code snippet below along with a fiddle for reference.
@media only screen and (max-width: 320px) {

  .sports-title {
      border: 1px solid red !important;
      -webkit-line-clamp: 1 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      display: -webkit-box !important;
      padding-left: 0px !important;
      width: 81px !important;
      flex-grow: 0 !important;
      flex-shrink: 0 !important;
      flex-basis: 0px !important;
      /* display: inline !important; */
      /* flex: 0 !important; */
      /* width: 77px !important; */
  }

}
javascripthtmlcss

Answer №1

To achieve the desired effect, consider using white-space: nowrap in place of flex, utilizing max-width rather than width, and incorporating text-overflow: ellipsis

.sports {
  background: #FFF;
  border-bottom: 2px solid #FFF;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  min-height: 73px;
  pointer-events: auto;
  position: fixed;
  width: 100%;
  top: 0;
  padding: 24px 60px 21px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.sports-leftBlock {
  background: transparent url(https://www.w3schools.com/css/paris.jpg) top left no-repeat !important;
  /* border: 1px solid red; */
  width: 55px;
  height: 50px;
  padding-left: 20px;
  position: absolute;
  left: 30px !important;
  top: 25px !important;
}

.sports-leftBlock,
.sports-rightBlock {
  position: absolute;
  left: 0;
  top: 0;
}

.sports-title {
  -webkit-flex: 1;
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  display: block;
}

.sports-title {
  font-family: 'Mercury Display', Times, serif;
  font-size: 40px !important;
  line-height: 1em;
  vertical-align: baseline;
  z-index: 1;
  font-weight: 600 !important;
  left: 108px;
  bottom: 25px;
  right: 136px;
  color: #12395B !important;
}

.sports-title {
  padding-left: 50px !important;
  text-align: left !important;
}

.sports-rightBlock {
  left: auto;
  right: 0;
}

@media only screen and (max-width: 320px) {
  .sports-title {
    border: 1px solid red !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    padding-left: 0px !important;
    max-width: 100px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* display: inline !important; */
    /* flex: 0 !important; */
    /* width: 77px !important; */
  }
}

@media only screen and (max-width: 768px) {
  .sports-leftBlock {
    /* border: 1px solid black; */
    width: 63px;
    height: 50px;
  }
}
<div class="sports">

  <div class="sports-leftBlock">
  </div>

  <h1 class="sports-title">
    basketball football swimming 
  </h1>

  <div class="sports-rightBlock">
    <button type="button" class="sports-close">
      <span class="screenReader">Close Pop-up Dialog</span>
      <span class="sports-closeIcon">
        <span class="sports-closeIcon-icon"></span>
      <span class="sports-closeIcon-highContrastGlyph" aria-hidden="true">×</span>
      </span>
      <span class="keyboardFocusRing"></span>
    </button>
  </div>

</div>

Answer №2

After understanding your goal, I apologize for not aligning my initial solution with it. However, the specifics were not outlined in your original query. The issue was resolved by adding position:relative; and making a few adjustments to the code. The section of code within the @media selector now appears as follows:

  .sports-title {
      white-space: nowrap;
      overflow: hidden !important;
      text-overflow:ellipsis;
      max-width:100px;
      position:relative;
      left: 5px;
}

I hope this modification addresses your needs.

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

Why does my Node.JS Express request return undefined after submitting a post request from a form?

Having trouble retrieving data from an HTML form using Node.JS/Express. The req.body seems to be empty, returning an undefined value. Node const express = require('express') const bodyParser = require('body-parser') const app = express ...

htmlnode.jsexpresspostundefined

Passing "this" to the context provider value in React

While experimenting with the useContext in a class component, I decided to create a basic React (Next.js) application. The app consists of a single button that invokes a function in the context to update the state and trigger a re-render of the home compon ...

javascriptreactjsreact-hooksnext.js

Switching Text in ReactJS from V to X: A Tutorial

I have been utilizing a Switch component from react-switch in my project. import Switch from 'react-switch'; render() { return <Switch onChange={this.onChangeStatus} onClick={this.onChangeStatus} c ...

cssreactjs

"Exploring the process of retrieving data from a request in Node.js with the help of the Express

I'm encountering some issues with integrating a "login" form into my Node.js script. While I can get it to work using a static HTML page, utilizing a dynamic ".ejs" page is causing trouble as my form fields are showing up as "undefined". var helmet = ...

javascriptnode.jsexpressejsbody-parser

Modify top position without affecting bottom alignment using CSS

I am currently working on a website that is designed to mimic a printable document. The layout consists of a header, body, and footer, with each element utilizing CSS for margin and height adjustments. The challenge lies in ensuring that the footer is alw ...

cssword-processor

Error encountered in thread "main": Issue with parsing string literal

import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; public class FindElementsUsingJS { static WebDriver driver= new FirefoxDriver(); public static void main(Stri ...

javascriptselenium-webdriver

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

htmlcsstwitter-bootstrap

Using JQuery to locate radio buttons that have been selected based on a variable

In my JavaScript code, I have created a variable called "thisRadio" to represent a dynamically generated div containing multiple radio buttons. Currently, one of these radio buttons may be checked and my goal is to find the checked radio button within this ...

htmljqueryradio-button

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

javascriptcsshtmldom

Experience the magic of Materialize CSS SideNav

I'm currently attempting to implement the mobile side navigation provided by Materialize. I've managed to display the menu icon, but when I click on it, nothing happens. It seems like the function is not being triggered, and there are no errors s ...

jqueryhtmlcssangularjsmaterialize

Troubleshooting video streaming loading issues caused by 404 errors in URL paths with videojs

I've been successfully using the video.js library to stream live video. Everything was going well until after a while, the URL started throwing a 404 error during streaming, causing the entire player to get stuck on loading. Now I'm looking for a ...

javascriptangularvideo-streaminghtml5-videovideo.js

Transferring data between Promises and functions through variable passing

I am facing a challenge. I need to make two separate SOAP calls in order to retrieve two lists of vouchers, and then use these lists to perform some checks and other tasks. I have placed the two calls within different Promise functions because I want to in ...

javascriptnode.jspromise

What is the best way to transform a string into an array?

After receiving an object from the http response, it looks something like this: {"[3, company1]":["role_user"], "[4, company2]":["role_admin"] } The key in the object is represented as an array. Is there a method in ...

javascriptarraystypescript

I can't seem to get my SVG data URL located inside an HTML file within an SVG data URL to display in Chrome

Background I am encountering an issue where an SVG data URL used as a background image property inside an HTML element within a <foreignObject> nested within an SVG data URL is not rendering properly in Google Chrome. If this structure was outside o ...

htmlcssgoogle-chromesvghtml5-canvas

Why is the type of parameter 1 not an 'HTMLFormElement', causing the failure to construct 'FormData'?

When I try to execute the code, I encounter a JavaScript error. My objective is to store the data from the form. Error Message TypeError: Failed to create 'FormData': argument 1 is not an instance of 'HTMLFormElement'. The issue arise ...

javascriptreactjsformsnext.jsform-data

Issues with Fetch API and CORS in Web Browsers

Hello, I'm encountering an issue related to CORS and the Fetch API when using browsers. Currently, my setup involves running a NodeJS server built with Express on localhost:5000. This server responds to a GET request made to the URL /get_a, serving ...

javascriptnode.jsexpresscorsfetch-api

How can a single item be selected from a multi-select drop-down menu using Python Selenium?

In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...

pythonhtmlformsseleniumxpath

Retrieve the class name based on the ID of the final appearance of the div using jQuery

<div class='user user1' id='newuser'></div> <div class='user user2' id='newuser'></div> <div class='user user3' id='newuser'></div> To retrieve the class name ...

javascriptjquery

React Redux causing React Router to display empty pages

In my App.js, the following code is present: const Index = asyncRoute(() => import('~/pages/index')) const Register = asyncRoute(() => import('~/pages/register')) const AddDesign = asyncRoute(() => import('~/pages/add-des ...

javascriptreactjsreact-routerreact-redux

What is the purpose of setting the Z-Index on a Popper menu

If you want to see a live example demonstrating the issue, head over to codesandbox.io. My goal is to create a 'sit below' menu just like it's shown in the Material-UI documentation here. return ( <div className={classes.root}&g ...

javascriptreactjsmaterial-uiz-index