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

Getting started with TinyMCE in Nuxt: A step-by-step guide

I need to incorporate this script into my Nuxt code: <script> tinymce.init({ selector: "#mytextarea", plugins: "emoticons", toolbar: "emoticons", toolbar_location: "bottom", menubar: false ...

javascriptvue.jstinymcenuxt.jsscript-tag

Combining various types of data into a single dataframe

I have been attempting to extract information from the following website: My ultimate objective is to create a dataframe containing the data from the table, and also add a new column that includes the players' index. For instance, for the top player, ...

pythonhtmlweb-scrapingbeautifulsoup

What is the best way to transfer information between pages using onclick in node.js and express?

script1.js const database = new Datastore('database.db'); database.loadDatabase(); app.get('/api', (request, response) => { database.find({},(err,data)=> { if(err){ response.end(); return; ...

javascriptnode.jsfetchnedb

Is there a way to display menu items in a list when hovering over the parent element using CSS?

Is it possible to make the code below run when hovering over (#cssmenu ul > li > ul > li ) with the mouse? #cssmenu ul > li > ul > li > ul { right: 1170px; } ...

css

Reasons Why Optional Chaining is Not Utilized in Transpiling a Node.js + TypeScript Application with Babel

Currently, I am delving into Babel in order to gain a deeper understanding of its functionality. To facilitate this process, I have developed a basic API using Node.js and TypeScript. Upon transpiling the code and initiating the server, everything operates ...

javascriptnode.jstypescriptexpressbabeljs

Obtain data from a single module and incorporate it into a different one

In my Angular 2 application, I am dealing with two component files - home.ts and folder-selector.ts. Within the folder-selector.ts file, there is a variable named pathToNode. I am trying to figure out how to access this value from within the home.ts file ...

javascripthtmlangulartypescript

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

I'm experiencing a unique issue with the current code present in my HTML index file. <div class="titleMessage"> <div class="heading"> <p class="main">NAME HERE</p> <p class="sub">Software Engineer& ...

htmlcsstextbackgroundelement

Having trouble getting a background image to show up in a table cell when using CSS clear:both?

I am working on an email and I want an image to only show up on mobile devices. To achieve this, I created an empty <td> with a span inside where I styled the span to have a background image. However, my issue is that I want the image to occupy an e ...

htmlcsshtml-tablehtml-email

When transitioning between single-page Angular applications using Protractor, a "JavaScript error: document unloaded while waiting for result" may be encountered

I came across this article discussing the issue of a Javascript error related to a document being unloaded while waiting for a result: JavascriptError: javascript error: document unloaded while waiting for result Although the solution provided seems to wo ...

javascriptangularjswebdriverprotractor

Executing Javascript with Ajax requested data - A guide to making your script run smoothly

Battlefield Page In the graphic provided, there is a battlefield page featuring 20 users. To capture and store this data in a MySQL database, I have created a JavaScript script. However, an issue arises when trying to collect data from the next page after ...

javascriptajax

What is the best way to know which API will return the result the fastest?

If we were to make 2 API calls, each taking around 6ms to return JSON data, what would be the sequence in which they provide the resulting data? The official JavaScript documentation mentions using Promise.all to manage multiple API calls. ...

javascriptnode.jsapi

Intermittent loading issues with Highcharts using AJAX requests

We've encountered intermittent errors when using Highcharts. Despite our efforts, we can't seem to pinpoint the cause of these issues in Chrome: Uncaught Highcharts error #16: www.highcharts.com/errors/16 VM210:16 HighCharts was already loaded V ...

javascriptjqueryajaxdjangohighcharts

What is causing the inconsistency in the widths of these HTML elements?

I recently created multiple div elements with a uniform width of 5px. Here is the CSS code I used: div { background-color: black; width: 5px; height: 100px; display: inline-block; } To my surprise, despite setting the same width for all divs, som ...

htmlcsswidthdisplay

Laravel implementation of Bootstrap Datepicker

Incorporating Laravel bootstrap and a date picker, I have encountered an issue where the todayHighlight feature is not functioning correctly. Additionally, the container aspect is also not working as intended. <link rel="stylesheet" href="https://sta ...

javascriptlaravelbootstrap-4

Exploring jQuery Mobile - What Causes an Empty State?

Using $.mobile.navigate("#test-page", {id:123}) for navigation to a secondary page seems to be successful. The transition between pages is smooth.... but the state remains empty! According to the documentation, the state should contain all necessary info ...

javascriptjqueryajaxjquery-mobilebrowser-history

Add different input strings to an array within the scope when there is a change in the input value (AngularJS)

My goal is to populate an empty array within the scope with strings. The number of elements in this array can vary depending on what the user types in the player count input field. $scope.playerNames = []; To achieve this, I am using a $watch function th ...

javascripthtmlangularjsarraysinput

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

I have a dynamic dashboard of cards that I created using the ng generate @angular/material:material-dashboard command. The cards in the dashboard are structured like this: <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> ...

htmlangulartypescript

Updating the text input value in a database with PHP upon button click

Here is a breakdown of what has been implemented so far: The database table is named adhar_card. Below is the structure image for reference (Adhard_card_id serves as the primary key). https://i.sstatic.net/8j4m6.jpg Clicking on the verify button will cha ...

javascriptphpjqueryhtmlajax

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

I am in the process of developing a website that compares different products. I have implemented code that retrieves and scrapes data for comparison when a user performs a search. Right now, I am using an ajax request for each company (currently 6 compani ...

phpjqueryhtmlajax

Material-UI is having trouble resolving the module '@material-ui/core/styles/createMuiTheme'

Although I have searched for similar issues on StackOverflow, none of the solutions seem to work for me. The errors I am encountering are unique and so are the fixes required, hence I decided to create a new post. The company conducting my test provided m ...

javascripthtmlcssreactjsmaterial-ui