How do you make elements fit the text size?

Question

How do you make elements fit the text size?

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I'm developing a website in which all pages have one with a title that varies in size, and in the same title there are two lines, one on each side of the text that has to fit the right size.

I know it sounds confusing, but to explain it better it follows an image for you to understand:

Mycode:

.promo{
	display:block;
	float:left;
	width:100%;
	height:200px;
	background-image:url(http://s0.ejesa.ig.com.br/portal/images/2012-07/1.461037.jpg);
	background-size:cover;
	background-position:center center;
}
h1{
	width:100%;
	text-align:center;
}

h1.tit_header{
	width:70%;
	margin:80px 15% 10px 15%;
	color:#FFF;
}

.line_01, .line_02, .line_03{
	display:block;
	width: 100%;
	clear:both;
	font-size:1em;
}

.line_01{
	display:block;
	float:left;
	width:80%;
	margin:0 10%;
	text-align:center;
}

.text_tit{
	display:block;
	float:left;
	width:33%;
}

.linhaAzul_box{
	display:block;
	float:left;
	width:33%;
	height:40px;
}
.linha{
	display:block;
	float:left;
	width:100%;
	height:5px;
	background-color:#fff;
	margin-top:18px;
}

<div class="promo">
    <h1 class="tit_header">
        <span class="line_01">
            <span class="linhaAzul_box"><span class="linha"></span></span>
            <span class="text_tit">Titulo Grande de Mais</span>
            <span class="linhaAzul_box"><span class="linha"></span></span>
        </span>
    </h1>
</div>

html css layout-responsivo

asked by anonymous 19.12.2014 / 20:43

2 answers

2

I think the solution is to use display: table; and display: table-cell; in immediate descendants. This way you can make the cells of this "table" adapt to the size / width.

But that alone does not resolve because I understand that you want the basically fixed central cell, the size of the content. To do this you can fool the browser and say that the sides should have% wx of width and that the central cell should have 50% . This will prevent line breaks and will force the side cells to make room for the title.

I suggest changes in CSS:

.line_01 {
    display: table;
    width:80%;
    margin:0 10%;
    text-align:center;
}
.line_01 > span {
    display: table-cell;
}
.text_tit {
    padding: 0 10px;
    white-space: nowrap;
}
.linhaAzul_box {
    width: 50%;
    height:40px;
}
.linha{
    display:block;
    width:100%;
    height:5px;
    background-color:#fff;
    margin-bottom: 5px;
}

jsFiddle: link

19.12.2014 / 22:22

How to insert UUID automatically in a MySQL colum? Problems when executing class in Java

score 3 · Accepted Answer

The best solution is to use Flexbox , it will save you a lot of work getting in calculating the internal positioning of the elements and making their HTML simpler. View browsers that support .

You can create two <span> elements (one before and one after) of the tag where the title will be. Or you can adopt a more elegant solution using the% wp% and% wp% pseudo-elements to make the lines, since they are not relevant to the page because it is only about something visual.

*{box-sizing:border-box;margin:0;padding:0}

header {
    background:url(http://i.stack.imgur.com/DGejA.jpg) center center;
    background-size:cover;
    height: auto;
    padding: 10% 10px;
    width: 100%;
    
    /* flexbox */
    display: -webkit-flex;
            display: flex;
  
    /* comportamento: em linha com wrap */
    -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
  
    /* conteúdo justificado no centro */
    -webkit-justify-content: center;
             justify-content:center;
}

span, h2 {
    -webkit-flex: 1 0 auto;
            flex: 1 0 auto;
}

.line {
    background: #fff;
    margin-top:12px;
    height: 4px;
    width: auto /* tcharam! */
}

h2 {
    color: #fff;
    text-align:center;
}

<header>
    <span class='line'></span>
    <h2 class='title'>Título pequeno?</h2>
    <span class='line'></span>
</header>

The secret is not to set the width of the internal elements, leaving the calculation in hand of the property ::after .

PS : You can set the sizes quietly, the behavior will depend on the ::before rule. In the example I left flexbox of elements all with flex-flow , assuming I had set my width with auto and the size exceeded the width of <h2> the internal content will be broken as in the following image: / p>

Ofcourse,donotjustrelyonthisrule.IdonotknowhowyourCSSisbutitwillcomeinasmallresolutionthatyouwillneedtotreatthebreakpointscorrectlywith200px.

Toprovethatheaderworksverywell,whynottryalargertitle?

/* É o mesmo CSS, minificado */

*{box-sizing:border-box;margin:0;padding:0}header{background:url(http://i.stack.imgur.com/FFTx9.jpg) center center/cover;height:auto;padding:10% 10px;width:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center}h2,span{-webkit-flex:1 0 auto;flex:1 0 auto}.line{background:#fff;margin-top:12px;height:4px;width:auto}h2{color:#fff;text-align:center}

<header>
    <span class='line'></span>
    <h2 class='title'>Olá, você me acha um título muito grande?</h2>
    <span class='line'></span>
</header>

Run the full-screen code block here in SOpt. If you're in the firefox , use the shortcut ctrl