Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm creating a page where a user can input a random comment and it should display the comment below. (as seen below)
The problem I have is that I want to make all the boxes fit within the page. For example, the longer strings should move to a new line and be replaced with shorter strings, etc.
At the moment I have each output as a <span> whilst I test.
Any help will be appreciated!
You can use white-space: nowrap;.
Demo:
div {
display: inline-block;
white-space: nowrap;
margin: 5px;
padding: 5px 10px;
border-radius: 3px;
border: 1px solid #333;
}
<div>
Content goes here.
</div>
<div>
Content goes here.
</div>
<div>
Content goes here. Content goes here. Content goes here.
</div>
<div>
Content goes here.
</div>
As far as re-ordering the elements to fill the gaps, you might need JavaScript.
You can do this with CSS, simpy by using display condition.
.classname {display:inline-block;}
You can also use block if you want every element to take a whole line instead.
.classname {display:block;}
I think you should make each div holding the comment to display : block and then set it's maxi-width: 100%. I think it should work fine. Note: this would have been a comment, but i can't make This would make enough space for the text and if text exceed the div, a new line would appear.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 days ago.
Improve this question
Id like to achieve this effect with any text/phrase.
(effect achieved on Figma)
example image
example 2
as you can see, in the examples the phrase is wrapped always with the largest part in the bottom.
as if I added a <br>: <h2>Black Panther:<BR>Wakanda Forever</h2>
or any other long movie text:
<h2>this is a movie<br>With a really looooong text</h2>
but I can't find a way to do it with css, this is what I can only get: the largest text is always on top.
example 3
like a regular text alignment, where the longest part of the whole title is on top:
this goes against my design as you can see.
Is there any way to solve it with css. I'm trying to avoid using JS for that detail.
I'll get movies titles from an API and adding a <BR> I think is not possible due to each title could be different lengths.
this is the code, is just an h2:
`<h2 class="featured-movie-title">The Black Parter: Wakanda Forever</h2>`
```.featured-movie-title{
display:flex;
justify-content: flex-end;
align-content: flex-end;
max-width: 35rem;
height: 7.8rem;
font-size: 3.2rem;
font-family: 'Magra', sans-serif;
text-align-last: right;
color: var(--white);
}
```
You will need to use <br/> to split the words on separate lines.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I’m trying to make it so that the pages of my book can fit into 2 specific column sizes for all the text such that I can click through the pages. Is there any way I can automate it so it detects where exactly in the page it needs to stop and move onto the next?
Ella, your question is very vague. I would suggest as #paulsm4 suggested you study up on html, css and javascript.
Your question does not explain where you are getting the text from, and how it is rendered to the screen. I am going to try and help.
Let's assume you are adding text to a div, your "book" has two pages and so let's assume each page is a div. One on the left and one on the right.
I am going to assume we can use the flex layout so let's use a flexbox.
The css would look something like this.
.book {
display: flex;
}
.page {
flex: 1;
padding: 10px; //just because
border: solid; //so you can see the page
}
The html would be:
<div class="book">
<div id="page1" class="page"></div>
<div id="page1" class="page"></div>
</div>
You could use css to make the min-height of the book 100% so that it spans the entire page. I have added an ID to each of the pages so that you can use javascript to find out how big the div block is.
The javascript would be something like this,
var width = document.getElementById('page1').offsetWidth;
var height = document.getElementById('page2').offsetHeight;
Now with simple maths width x height we have the area. But now we have a problem. What is the font size and type of font you are using. If you have a fixed width font then this is easy if you have a variable width font, then you may have a problem. But in essence, using the size of a letter you could workout by taking the area of the div divided by the area of a letter and you will know how many letters and punctuation can fit in the div.
Alternatively, and a little more complex, but an approach I would use, would be to add words to the div, until the div is larger than a predetermined height. When this happens, remove the previous word and add words to the next div. This can be done using javascript. I would suggest instead of pure javascript that you use a framework such as react, or angular.
Your question however lacks loads of information. In future, please provide some source code to show what you have done, how you are fetching the words and how you are rendering them.
I suggest you take a Udemy course and learn a little more about html, javascript and css. See here.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
As a novice web developer I've been trying to build myself a personal webpage from scratch. However I've encountered a problem.
Here's my webpage, it looks ok but when you click any of the links on the left side, and turn a # to display:block from display:none you can see the "bleeding" on the bottom.
I have no idea why this happens, so I'm linking my repo which contains the html and the css for the page.
Put a simple CSS in your Canvas Tag
style="position:fixed"
and its Done
If I understood your question you want to remove the green band at the bottom of the page.
It comes from your background-color:
body {
/* background-color: #A7DBD8; */
}
Juste remove it and it's ok ;)
Remy
Changing the style on the canvas element from
display: inline-block;
to
display: block;
fixes this.
Delete the :
<div class="footer">
from the index.html because you're not using it
Your panes are a fixed width and height: 620px, 500px respectively. If you add padding-top: 100px to a pane (as you did with #links div), it will increase your height to 600px and push things down.
The quick fix is to, instead of adding padding-top: 100px to your #links div, add it to the first paragraph in your #links div.
#links p:first-child {
padding-top: 100px;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've tried messing with vertical-align, line-height, etc.
should show you what I'm trying to do. I put a little red arrow to show where I want the text shifted up to.
You'll need to modify the top margin in css or html, below are three ways of doing so.
edit in css:
h2 {
margin-top: 0px;
}
edit inline style in html:
<h2 style="margin-top="20px;"> remove "margin-top" from inline style
override inline style:
if you don't have access to your html you can override the inline style:
h2[style] {
margin-top: 0px;
}
Update:
Based on your comment on your OP, it looks like you only want to move your text up about 5px. you may want to use something like margin: 15px or margin: 20px to line your text up with the top of the grey box. The examples above still apply.
You are using an h2 tag surrounding the text. You should override the margin for that particular class in this fashion:
h2 {
margin-top:0;
}
If you wish to only target the text in that particular div you should specify that in your css like so:
#this-div h2 {
margin-top:0;
}
EDIT
As you are using inline styles in your html (which I personally tend to avoid) you will have to modify the inline styles of your h2 tag within your html to achieve the results you desire.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Here is a CodePen example: http://cdpn.io/wlEpA
As you can see, all of the texts line height is different, even though each element has the same CSS.
Is this an issue with the font?
The text should all be the on the same line.
Edit: 2 people have said this post is not clear or useful, at least explain why so I can make it more clear, your vote on my post is also not clear or useful.
The issue is the padding: 50% 0; style on the .ml elements. 50% is a relative value. Those elements currently vary in width, depending on the size of their content, and that affects how the padding is calculated.
Specify a width or min-width for the .ml elements and they will line up correctly. Here is your CodePen example, with min-width: 100px; added: http://codepen.io/anon/pen/mbsnH
One solution, is to set the line-height on the .mi css class.
.mi {
float:left;
cursor:pointer;
border-top:#222222 4px solid;
margin:0em 1em;
height:90%;
line-height:85px;
}
Example: http://jsfiddle.net/NerLZ/1/
i.e. to make it the same height as the .menu class.
(If I've understood the problem correctly).
Martyn, you have display:inline-block on your links, and you have float:left on your divs. That's redundant. And inline-block creates margin inconsistencies. Turn off inline-block and that will fix your problem.