Hoe roteer ik de tekst in CSS om de volgende uitvoer te volgen:
Hallo,
EDIT:
Bedankt voor een snelle suggestie. Ik heb mijn voorbeeldcode toegevoegd in JSFIDLE:
http://jsfiddle.net/koolkabin/yawym/
HTML:
<div class="mainWrapper">
<div class="rotateObj">
<div class="title active">First Text Title</div>
<div class="content">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
</div>
</div>
CSS:
.mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
.rotateObj{position:relative; height:400px;}
.rotateObj .title{
float:left;
background:gray;
width:50px;
height:100%;
/** Rounded Border */
border-radius:5px;-moz-border-radius:5px;
/** Rotation */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateObj .active{background:green;}
.rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
.hide{display:none;}
Het probleem waar ik tegenaan loop, is dat wanneer we de tekst roteren, de uitlijning en posities worden verbroken. Dus wat veroorzaakt dat en hoe kan ik ze beheren?
Antwoord 1, autoriteit 100%
U moet de CSS3 transform-eigenschaprotate– zie hiervoor welke browsers het wordt ondersteund en welk voorvoegsel je moet gebruiken.
Een voorbeeld voor webkit-browsers is -webkit-transform: rotate(-90deg);
Bewerken:de vraag is aanzienlijk gewijzigd, dus ik heb een demodat werkt in Chrome/Safari (omdat ik alleen de -webkit-CSS-prefixregels heb opgenomen). Het probleem dat je hebt is dat je de titel divniet wilt roteren, maar gewoon de tekst erin. Als u uw rotatie verwijdert, staan de <div>en op de juiste positie en hoeft u alleen maar de tekst in een element te plaatsen en dat in plaats daarvan te roteren.
Er bestaat al een meer aanpasbare widget als onderdeel van de jQuery UI – zie de accordeondemopagina. Ik ben er zeker van dat je met wat CSS-slimheid in staat zou moeten zijn om de accordeon verticaal te maken en ook de titeltekst te roteren 🙂
Bewerken 2:ik had het probleem met het tekstcentrum voorzien en heb al mijn demo bijgewerkt. Er is echter een hoogte-/breedtebeperking, dus langere tekst kan de lay-out nog steeds breken.
Bewerken 3: Het lijkt erop dat de horizontale versie deel uitmaakte van de Oorspronkelijk plan Maar ik kan geen enkele manier zien om deze op de demo-pagina te configureren. I was onjuist … De nieuwe accordeon maakt deel uit van de aankomende jQuery ui 1.9! U kunt dus de ontwikkeling van de ontwikkeling proberen als u de nieuwe functionaliteit wilt.
Ik hoop dat dit helpt!
Antwoord 2, Autoriteit 81%
In uw geval is het het beste om draaiende optie te gebruiken van transformatie-eigenschap zoals eerder vermeld. Er is ook writing-modeProperty en het werkt als roteren (90DEG), dus in uw geval moet het worden geroteerd nadat deze wordt toegepast. Zelfs het is niet de juiste oplossing in dit geval, maar u moet op de hoogte zijn van deze accommodatie.
Voorbeeld:
writing-mode:vertical-rl;
Meer over Transformeren: https://kolosek.com/css-transform/
Meer over schrijven-modus: https://css-tricks.com / almanac / eigenschappen / w / schrijf-modus /
Antwoord 3, Autoriteit 34%
Ik denk dit is waar je naar op zoek bent?
Een voorbeeld toegevoegd:
De HTML:
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
De CSS:
.year
{
display:block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}
Alle voorbeelden zijn van de genoemde site.
Antwoord 4, Autoriteit 9%
U kunt zoals deze gebruiken …
<div id="rot">hello</div>
#rot
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
width:100px;
}
Bekijk deze Fiddle: http://jsfiddle.net/anish/man4g/
Antwoord 5, Autoriteit 7%
Met writing-modeen transform.
.rotate {
writing-mode: vertical-lr;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
<span class="rotate">Hello</span>
Antwoord 6
Ook kunt u
<div style="position:relative;display:block; height:125px;width:300px;">
<div class="status">
<div class="inner-point">
<div class="inner nowrap">
Some text
</div>
</div>
</div>
</div>
<style>
.status {
position: absolute;
background: #009FE3;
right: 0;
bottom: 0;
top: 0;
width: 37px;
}
.status .inner-point {
position: absolute;
bottom: 0;
left: 0;
background: red;
width: 37px;
height: 37px;
}
.status .inner {
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 27px;
letter-spacing: 0.2px;
color: white;
transform: rotate(-90deg);
}
</style>