Text material is visible beyond the boundaries of the div

Recently, I experimented with creating div elements in different shapes such as triangles and trapezoids.

HTML:

<div class="triangle">Hello! Nice to meet you all.</div>

CSS

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

The content displayed correctly when the div was a square (with both height and width set to 100px).

However, after styling the div to appear as a triangle, the content began to overflow.

I am seeking advice on how to maintain proportionality so that the content displays properly within the div element.

View the fiddle here: http://jsfiddle.net/7qbGX/2/

Any suggestions or guidance would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

Check out this code snippet: HERE

.triangle{
    width: 0px;
    height: 0px;
    border-style: inset;
    border-width: 0 100px 173.2px 100px;
    border-color: transparent transparent #007bff transparent;
    float: left;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

.triangle p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

Answer №2

With a height and width of 0, your div won't be able to contain any text. It will either overflow or you can set the overflow to "hidden", but then you won't be able to see anything because the div is size 0.

Answer №3

Make your div visible by adding a background color to it.

[Check out the demo]http://jsfiddle.net/salwenikhil0724/7qbGX/6/

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
    background-color:red;

}
.triangle p {
    text-align: center;
    top: 40px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

Answer №4

When it comes to properly displaying text, it's important to include the width property like so:-

  <div style="width: 10em; word-wrap: break-word;">
   Some lengthy text with antidisestablishmentarianism
  </div>

If you want horizontal scrolling, you can use overflow-x:hidden, it's your choice.

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

Combine Two Values within Model for Dropdown Menu

I am currently facing a situation where I have a select box that displays a list of users fetched from the backend. The select box is currently linked to the name property of my ng model. However, each user object in the list also contains an email proper ...

htmlangulartypescript

navigation bar directing to the wrong destination

My landing page has attached pages like landing/gothere and /another. The issue arises when I try to navigate from /another to landing/gothere. I fetch landing information using an API, but there's a delay when I click on the navbar link. The page loa ...

javascripthtmlvue.jsnuxt.js

VS Code lacks autocomplete intellisense for Cypress

I am currently using Cypress version 12.17.1 on VS Code within the Windows 10 operating system. My goal is to write Cypress code in Visual Studio Code, but encountered an issue where the cypress commands that start with cy are not appearing as auto-comple ...

javascriptvisual-studio-codenpmcypress

Enable the option to deactivate specific dates in the datepicker function

In my Laravel application, I have an online appointment form that includes a "Select Doctor" field and a "datepicker." For example, if doctor "A" is available at the clinic on Saturday, Monday, and Wednesday, while doctor "B" is available on Sunday, Tuesd ...

phpjquerylaravellaravel-5datepicker

How should I position <script> tags when transferring PHP variables to JavaScript?

I've attempted to find an answer without success due to its specificity. Within the header.php file, which serves as the header of the website, various scripts are included to enable jQuery functionality. Additionally, there is a file called workscri ...

javascriptphpjquery

Activate the Bootstrap 5 responsive font sizing feature (RFS) for the base font elements

I'm attempting to utilize Bootstrap's RFS functionality in version 5.1.3 to apply font sizing globally. Within my SCSS file, I've defined some basic font sizes, imported the Bootstrap SCSS files, and configured the font size settings. Howev ...

csstwitter-bootstrapsassresponsivebootstrap-5

Challenge with modifying CSS variable names in Angular SSR

Recently, I noticed that some of my CSS variable names are being changed to something else on the server-side rendering build, causing them not to work as expected. An example of this is: .color-black-75 { color: var(--black-75-color); } In my styles. ...

cssangular

Unable to transform Symbol data into a string - Error when making a React AJAX delete call

I'm encountering an issue where I am getting a Cannot convert a Symbol value to a string error in the console. My tech stack includes React v15 and jQuery v3. https://i.stack.imgur.com/qMOQ8.png This is my React code snippet: var CommentList = Reac ...

javascriptjqueryajaxreactjs

Inputting information into a text field and subsequently modifying it

I've created a text box that pulls its text from a variable connected to a database. ee from the employee class and s from the general class are both functioning correctly, and the data within ee is accurate. Upon loading the page, the textbox displ ...

htmlasp.net

Steps for transmitting XML data from Ajax to a Spring Controller

I've been encountering an issue while attempting to send XML data from jQuery AJAX to a Spring controller and then trying to parse the XML in Java. Unfortunately, I'm stuck at this point and unable to move forward. Could someone kindly assist me ...

jqueryajaxxmlspringspring-mvc

Combine linear and radial background effects in CSS styling

I am trying to achieve a background design that includes both linear and radial gradients. The linear gradient should display a transition from blue to white, while the radial gradient should overlay a polka dot pattern on top of it. I have been following ...

htmlcssbackgroundlinear-gradientsradial-gradients

Refreshing website with personalized retrieved information

My goal is to populate a tab with specific data from a button click using the unique_id. However, I am encountering an issue where I want the tab to display the corresponding variable without having to refresh the page. Despite searching for solutions on ...

phpjquerysqlajaxtabs

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

Below is the HTML content: <div class="wrapper"> <figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>RESPONSIVE HTML5 WEBSITE FOR <br> OR LEDS COMPANY</span></fig ...

css

Using NodeJS to extract information from Opendata JSON files

I'm currently working on a project that involves fetching JSON data from an Open Dataset using NodeJS and passing it to angular. The challenge I'm facing is that I'm receiving a JSON file instead of a JSON object, which makes it difficult to ...

javascriptangularjsjsonnode.jsdataset

Change the Vue3 PrimeVue theme or CSS file with a simple click or upon page load

One way to incorporate themes is by importing them in the main.js file at the root of the app: import 'primevue/resources/themes/arya-orange/theme.css'; However, I am exploring ways to dynamically switch CSS files based on the user's system ...

javascriptvue.jsimportvuejs3primevue

Clicking to remove added child element

I have written a script that creates an image popup when the site loads. Here is the code: <script type="text/javascript"> function showPopup() { var div = document.createElement('div'); div.className += 'popup'; div.inne ...

javascripthtmlcss

Passing a JavaScript variable from the view to the controller

I have the following code in my View: jQuery.ajax({ data: "val"= + val, dataType: 'script', ype: 'post', url: "/portfolio/update" ); This is the code in my controller: j=params[:"val"] h=j.split(" ") After checking the rails conso ...

jqueryruby-on-railsajaxruby-on-rails-3

The functionality of the Bootstrap carousel may be compromised when initialized through JavaScript

Why isn't the Bootstrap carousel working in the example below? It starts working when I paste it into .content <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script sr ...

javascriptjquerytwitter-bootstrap

The crosshair functionality in Zing Chart is causing a CPU leak

After enabling the crosshair feature on my chart, I noticed a significant issue when using Chrome 57 (and even with versions 58 and ZingChart 2.6.0). The CPU usage spikes above 25% when hovering over the chart to activate the crosshair. With two charts, th ...

javascriptangularzingchart

How can I make two flexbox items in a row stack on top of each other as a column?

I'm currently working on a layout that involves a parent flexbox containing multiple sections. My challenge lies in getting two specific sections to stack vertically while the rest of the layout remains horizontal. At the moment, I have two sections ...

csslayoutflexboxalignment