Wrapped text wanneer men de browserwindow klein(er) maakt - Softwareontwikkeling

woensdag 17 oktober 2007 14:00

Acties:

Topicstarter

Ik vroeg mij af hoe je text wrapping via html of CSS kan uitschakelen wanneer je een browserwindow kleiner maakt. Ik heb op google en de GOT-search gekeken, maar kon geen oplossing vinden.

woensdag 17 oktober 2007 14:02

Acties:

MueR

Admin Devschuur® & Discord

is niet lief

Dan zal je de container van de tekst een fixed with moeten meegeven.

Anyone who gets in between me and my morning coffee should be insecure.

woensdag 17 oktober 2007 14:27

Acties:

Arcane Apex

Topicstarter

Ik heb de <span> tag die de text omvat een WIDTH gegeven en tevens een HEIGHT, maar de text blijft wrappen bij het verkleinen van de browser window.

woensdag 17 oktober 2007 14:29

Acties:

Comgenie

Soms heb je dat

CSS oplossing:
span { nowrap; }

klaar

[ Voor 32% gewijzigd door Comgenie op 17-10-2007 14:30 ]

No animals were harmed in the making of this comment.

woensdag 17 oktober 2007 14:29

Acties:

Leedbek

Luuk Luchtloper

Arcane Apex schreef op woensdag 17 oktober 2007 @ 14:27:
Ik heb de <span> tag die de text omvat een WIDTH gegeven en tevens een HEIGHT, maar de text blijft wrappen bij het verkleinen van de browser window.

De <span> tag ondersteunt de attributes width en height niet. Als je de text verpakt in een <div> en die een fixed width geeft moet het wel werken.

Klaar voor de steroorlogen?

woensdag 17 oktober 2007 14:32

Acties:

Zamalan

Whine Connaisseur

Arcane Apex schreef op woensdag 17 oktober 2007 @ 14:27:
Ik heb de <span> tag die de text omvat een WIDTH gegeven en tevens een HEIGHT, maar de text blijft wrappen bij het verkleinen van de browser window.

<span> is een inline element, width en height zullen dus niet werken. Ofwel moet je er een <div> van maken, ofwel zet je style="display:block"

edit:

Comgenie schreef op woensdag 17 oktober 2007 @ 14:29:
CSS oplossing:
span { nowrap; }

klaar

net geprobeert en dat lukt bij mij niet hoor (toch niet in FF en Opera, wel in IE)

[ Voor 23% gewijzigd door Zamalan op 17-10-2007 14:36 ]

MSI GX660 --- i5 460M /// 4GB DDR3 /// Mobility Radeon HD5870 /// 1920x1080 /// 500GB

woensdag 17 oktober 2007 14:40

Acties:

Arcane Apex

Topicstarter

Ik heb de span tags veranderd naar div tags en een fixed height en width gegeven, maar de text blijft wrappen bij het verkleinen van de window.

woensdag 17 oktober 2007 14:42

Acties:

BtM909

Watch out Guys...

Als het probleem zo simpel te reproduceren is, waarom zie ik in dit topic geen een regel code (tussen [code=html][/] of [code=css][/] tags staan.

Geef even een voorbeeld zodat wij je beter kunnen helpen naar een oplossing. Ik wil je meteen vragen om Webdesign, Markup & Clientside Scripting Policy door te lezen, want zo'n magere topicstart heb ik laatste tijd niet gezien

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 17 oktober 2007 14:45

Acties:

Zamalan

Whine Connaisseur

Mogelijks staat de div als inline o.i.d. door overerving. Kun je anders eens je code plaatsen?

edit:

HTML:

<html>
<head>
</head>
<body>
<span style="display:block;width:2000">Proin erat velit, varius eu, ultrices ac, pharetra vitae, enim. Suspendisse semper turpis et nunc. Praesent vestibulum neque. Morbi id ante nec sem dapibus sagittis. Morbi nec nulla quis velit suscipit accumsan. Donec eget neque a sapien dapibus pulvinar. Curabitur consequat dapibus eros. Nulla facilisi. Sed ultricies magna sagittis tortor. Nulla mattis, turpis eget hendrerit pulvinar, augue libero luctus mauris, sit amet facilisis elit est id nulla. Donec et lacus. Proin sed augue. Nam molestie augue ut nisi. Curabitur placerat purus sit amet lectus. Aliquam eu leo eget ligula ultricies dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent laoreet g</span>
<div style="width:2000">Proin erat velit, varius eu, ultrices ac, pharetra vitae, enim. Suspendisse semper turpis et nunc. Praesent vestibulum neque. Morbi id ante nec sem dapibus sagittis. Morbi nec nulla quis velit suscipit accumsan. Donec eget neque a sapien dapibus pulvinar. Curabitur consequat dapibus eros. Nulla facilisi. Sed ultricies magna sagittis tortor. Nulla mattis, turpis eget hendrerit pulvinar, augue libero luctus mauris, sit amet facilisis elit est id nulla. Donec et lacus. Proin sed augue. Nam molestie augue ut nisi. Curabitur placerat purus sit amet lectus. Aliquam eu leo eget ligula ultricies dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent laoreet g</div>
</body>
</html>

[ Voor 89% gewijzigd door Zamalan op 17-10-2007 14:50 ]

MSI GX660 --- i5 460M /// 4GB DDR3 /// Mobility Radeon HD5870 /// 1920x1080 /// 500GB

woensdag 17 oktober 2007 14:49

Acties:

Swaptor

Java Apprentice

offtopic:
fix0rds

Hoe verloopt de wrapping als de span een style="display:block" meekrijgt?

[ Voor 31% gewijzigd door BtM909 op 17-10-2007 15:27 ]

Ontdek mij!
Proud NGS member
Stats-mod & forum-dude

woensdag 17 oktober 2007 14:50

Acties:

Arcane Apex

Topicstarter

code:

edited

[ Voor 93% gewijzigd door Arcane Apex op 17-10-2007 15:15 ]

woensdag 17 oktober 2007 14:55

Acties:

Arcane Apex

Topicstarter

Swaptor schreef op woensdag 17 oktober 2007 @ 14:49:

offtopic:
@BtM909: zelden niet is een dubbele ontkenning, wat de zin dus een wat vreemd verloop geeft

Hoe verloopt de wrapping als de span een style="display:block" meekrijgt?

Ook in die situatie blijft de text wrappen. (browser: IE7)

woensdag 17 oktober 2007 14:56

Acties:

Zamalan

Whine Connaisseur

Arcane Apex schreef op woensdag 17 oktober 2007 @ 14:50:

code:

<div class="mainPageTextBoxText" WIDTH="800" HEIGHT="300"> 
        <br>
        X is reducing the pain of mobile application developers to test their applications.<br>
        It is mobile application testing. <br><br>
        
        Due to demand, we require testers to register their handsets in this alpha (registration only) version. <br><br>
                
        When the project module is completed, the testers will be able to do testing projects. <br>
        The testers will use their own handsets and get compensation. <br><br>
                
        Similarly mobile application developers will be able to add testing projects and pick <br>
        the testers they require. <br><br>
        
        Good luck! <br>
    </div>

div en span hebben geen height en width attributen. Deze zijn enkel met css te zetten. Standaard attributen van div zijn: id, class, title, style, dir, lang, xml:lang

http://www.w3schools.com/tags/tag_div.asp

CSS dus aanpassen met:

Cascading Stylesheet:

.mainPageTextBoxText
{
  width:800;
  height:300;
}

Edit: Hou er rekening mee dat height niet "visueel" zal te zien zijn aan de text, die zal onderaan gewoon door lopen. Als die echt niet buiten de div mag lopen zet dan "overflow:scroll" of "overflow:hidden" in je css.

[ Voor 9% gewijzigd door Zamalan op 17-10-2007 15:01 ]

MSI GX660 --- i5 460M /// 4GB DDR3 /// Mobility Radeon HD5870 /// 1920x1080 /// 500GB

woensdag 17 oktober 2007 15:05

Acties:

Arcane Apex

Topicstarter

Zamalan schreef op woensdag 17 oktober 2007 @ 14:56:
[...]

div en span hebben geen height en width attributen. Deze zijn enkel met css te zetten. Standaard attributen van div zijn: id, class, title, style, dir, lang, xml:lang

http://www.w3schools.com/tags/tag_div.asp

CSS dus aanpassen met:
Cascading Stylesheet:
1
2
3
4
5
.mainPageTextBoxText
{
  width:800;
  height:300;
}
Edit: Hou er rekening mee dat height niet "visueel" zal te zien zijn aan de text, die zal onderaan gewoon door lopen. Als die echt niet buiten de div mag lopen zet dan "overflow:scroll" of "overflow:hidden" in je css.

Yep, that did the trick! Thanks mensen!

Pagina: 1

Reageer