when i m writing a long sentence in label without line break then it does wrap automatically.
i m putting that label in tag. how can i wrap that long sentence.
Unclear, but you can force a line break by adding a <br /> in it.
<label>Some long long long long long long<br /> long long long label</label>
create style sheet like this "
.label { word-wrap: break-word }
and assign to you label
check the link for more detail : http://www.css3.com/css-word-break/
I'd hesitate to use the CSS3 solution without some kind of IE fallback.
You need to add the following CSS to your label:
label { display: block; width: 100px; }
Then change the width to the width you'd like your label to be and the sentence will wrap within the space.
By default a label has inline display which makes width control difficult.
If you still need the label to be inline with your input field, float the label.
Related
I tried to develop ui table control with multi select option.
The label of each column is sap.m.Text:
But when i re size the column width, parts from the label text are hide:
It's all because of the "sapUiSizeCozy" class for the multi select option (the checkbox)
When i don't use this "sapUiSizeCozy" class the label text will be OK and wrapped, but, there will no be checkboxex:
I add this css class to the sap.m.Page control
Any help?
I need that the label will wrapped + the checkbox in each row
Thanks!
Edit:
Please see an example in:
Plunker
You can in view.xml file remove the:
class="sapUiSizeCozy"
And re size the Product Name" column to see that the column is wrapping
sapUiSizeCozy sets a fixed height to the table header. The label text is then verticaly centered by sapUiSizeCozy by setting lineheight to the height of the header.
This results in the effect that the label is wrapped but the second row is cut of by the fixed header height.
You can fix that with the following css (see Plunker):
<html:style>
.sapUiSizeCozy .sapUiTable .sapUiTableColCell>* span{
line-height: normal;
vertical-align: middle;
display: inline-block;
}
</html:style>
I'm trying to make an input text look like exactly like a span. I want my user to be able to type text without noticing he's in a field.
I've almost succeeded, the last problem I've got is about the width of the input.
The input text is wider than the text it's replacing.
Here's the jsfiddle. (You may click on "Texte" to type yours).
Here's the interesting css part :
input {
background-color: transparent;
padding: 0px;
border: initial;
font: inherit;
margin: 0px;
}
Here is the idea try fixed width for the inputs
Demo : http://jsfiddle.net/nyitsol/eotd8p4n/17/
also you may try use the same width of the span for the input
$('span.width').width(); // returns a width value
using this get the width of the span and put it into the input box using JavaScript.
EDIT:
try this, if you want to grow the input based on text limit then you have to increase the size as well.
http://jsfiddle.net/nyitsol/eotd8p4n/25/
var input = $('<input onkeypress=\"this.style.width = ((this.value.length + 1) * 8) + \'px\';\" type=text>');
Anybody know how I could wrap the text in reverse order, from bottom to top?
I attached an example image.
[][http://i.stack.imgur.com/RVsIG.jpg]
Instead of breaking the line after it is full and having an incomplete line at the end, I need to brake somehow from bottom to top, so bottom lines are full and top line is incomplete.
I would not recommend using exotic CSS attributes which aren't even in Chrome & Firefox yet. The best cross-browser solution is to handle this in Javascript when the document loads. Here's a sketch of how to do that:
$(function() {
$(".title").each(function(i,title) {
var width = 0;
var originalHeight = $(title).height();
var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
while (originalHeight == $(title).height()) {
spacer.width( ++width );
}
spacer.width( --width );
});
});
Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/
6 years later, but fret not! I have found a pure CSS solution!
Turns out you can achieve this result with flexbox, but it's not obvious or very straight forward. This is what I started out with:
I want the header to be "bottom-heavy", the same effect as you describe in the question.
I began by splitting up my string by whitespace and giving them each a <span> parent. By using flex-wrap: wrap-reverse, and align-content: flex-start. You will achieve this:
Oh no! Now the order is messed up! Here comes the trick. By reversing both the order in which you add spans to the HTML and the direction order of flex with 'flex-direction: row-reverse', you actually achieve the "pyramid-shaped" upwards overflow effect you desire.
Here is my (simplified) code, using react and react-bootstrap:
<Row className='d-flex flex-wrap-reverse flex-row-reverse align-content-start'>
{props.deck.name
.split(' ')
.reverse()
.map(word => (
<span className='mr-1'>{word}</span>
))}
</Row>
There is no general css solution for it. You must have to utilize help of any language.
This is one of the solution using PHP:
<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>
Well, if that is depending on the text, then you can try something like a word replacer. For example
var words = "This is what I want to achieve";
var newWords.replace("what", "what <br />"); // note the line break
document.write(newWords);
Here is a fiddle for you: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/
Otherwise, I don't think you can break a line depending on number of characters in a line.
Wrap and Nowrap will be rendered by the client-browser, so you can not force the browser to wrap from bottom to top. but you can do that with javascript or asp.
This is not a formal solution for this problem. But see if this helps.
The HTML CODE
<div id="mydiv">
I can imagine the logic behind the code having to detect what is the last line, detect the div size, and the font size... then measure how many characters it can fit and finally go to the above line and insert the break where necessary. Some font families might make this harder, but trial and error should solve the issue once the basic code is set..
</div>
CSS:
#mydiv
{
width:1000px;
line-height:18px;
font-size:20px;
text-align:justify;
word-break:break-all;
}
Here setting the div width around 50 times that of the font-size will give you the precise result. Other width values or font values might slightly disorient the last line, giving some blank space after the last character.(Could not solve that part, yet).
JQuery:
$(document).ready(function(){
//GET the total height of the element
var height = $('#mydiv').outerHeight();
//Get the height of each line, which is set in CSS
var lineheight = $('#mydiv').css('line-height');
//Divide The total height by line height to get the no of lines.
var globalHeight = parseInt(height)/parseInt(lineheight);
var myContent = $('#mydiv').html();
var quotient = 0;
//As long as no of lines does not increase, keep looping.
while(quotient<=globalHeight)
{
//Add tiny single blank space to the div's beginning
$('#mydiv').html(' '+myContent);
//Get the new height of line and height of div and get the new no of lines and loop again.
height = $('#mydiv').outerHeight();
lineheight = $('#mydiv').css('line-height');
quotient = parseInt(height)/parseInt(lineheight);
myContent = $('#mydiv').html();
}
//get the final div content after exiting the loop.
var myString = $('#mydiv').html();
//This is to remove the extra space, which will put the last chars to a new line.
var newString = myString.substr(1);
$('#mydiv').html(newString);
});
If you already know where you want your breaks to take place just use simple HTML breaks to break your content and have it display the way you want.
<p>This is what<br/>
want to acheive with your help</p>
If you set the breaks manually (and you know where you want them to break) then create them yourself.
You could also try setting separate css width adjustments based on the dimensions of the screen you are seeing the breaking you are not liking and set an #media reference to make the div width smaller to break the text so it doesn't run unevenly across the top of certain size devices.
Use display: inline-block; on the text div.
I would like to be able to remove the "space" at the top and the bottom of a text inside of a container.
The div must be as close as possible to the text inside.
This text is the result of a input and can be changed by the user.
I guess that I should work with the line-height, but how?
Any advice would be greatly appreciated!
Used to line-height
.some_css{
line-height: px; // according to your text size of design
}
Use the CSS padding property to set space within the borders of the element:
padding:0;
Additionally as Terric has pointed out, if the child has a margin, remove it:
margin:0;
you can either use padding: 0' or try line-height:px
what padding do
with zero padding
and line height
As explained in the title, I needed to "dynamically" remove the space around text.
In fact, every fonts have different structure and don't render in the same way on every browser...
I found a compromise for this :
.text { line-height: 70% }
As explained here, if we use a percentage, we could apply any font-size to our text, the line-height will always be the same.
I can change the font-size with jQuery, the line-height will always be properly applied to the text and to the surrounding element.
I dealt with a case function for every font to apply a different line-height. In my case, this is a working solution...
var fontFamily = $( "input" ).val(); // Here, the font-Size is defined dynamically by the user... It could be Arial, Verdana, Comic etc...
var lineHeight;
switch ( fontFamily ){
case "Arial Black": // if the user has selected the arial black font...
lineHeight = "70%"; // we define a line-height that will be correctly applied to the text
break;
case "Verdana":
lineHeight = "78%";
break;
default:
lineHeight = "66%";
}
$( ".text" ).css("line-height", lineHeight); // we apply the line-height to the text...
Note that the user can also change the font-size with another select element...
Hope this could help...
I am doing a div that needs to display the whole content of a text field and adjust the text size dynamically so that it will not overflow.
To get an idea of the problem, look here http://sandbox.littlegraffyx.com/bible/
You can try entering verses at lower left text box using the format GEN 1:1 for "Genesis 1:1"
My problem is when I try to display long verses, they get truncated. I need to change the size based on how long the current text is. Is there some css that can be applied based on text field size?
As mentioned in the comments, it isn't possible to scale text based on the height of its containing element using pure CSS. But here's a small jQuery script I have used in the past when I needed to achieve what you want. It also adjusts the text size when the user resizes the browser window.
HTML:
<p class="quote">
Really long text goes here...
</p>
CSS:
.quote {
// The largest size to display text at.
font-size: 36px;
}
JS:
$(window).bind('resize',function(e){
scaleQuote();
});
function scaleQuote(){
var quote = $('.quote');
var winH = $(window).height();
// Reset font size.
quote.css('font-size', '');
// If quote is larger than viewport, reduce font-size until it fits.
while (winH < (quote.height())){
var fontSize = parseInt(quote.css('font-size'), 10);
quote.css('font-size', fontSize-1+'px');
}
}
scaleQuote();
Demo: http://jsfiddle.net/eCBmc/2/
You can try something like this. It will set input field to 10 character, and if it's bigger it increase it's size.
http://jsfiddle.net/4qjjf/1/
<html>
<body>
<textarea cols="10" rows="1" id="shit"
onkeyup="this.cols=this.value.length>10?this.value.length:10;"></textarea>
</body>
</html>