Long url πρόβλημα

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από sibas » 20 Νοέμ 2009 18:19

Κόλλησα σε ένα φαινομενικό εύκολο πρόβλημα και έφαγα 3 ώρες πάνω σε αυτό gmt #$%@#$%^#$

Anyway έχω το παρακάτω

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css"> 
body  &#123;
font&#58; 100% Verdana, sans-serif;
background&#58; white;
margin&#58; 0; 
padding&#58; 0;
text-align&#58; center; 
color&#58; #000000;
&#125;

#main &#123; 
width&#58; 800px;  
margin&#58; 0 auto; 
text-align&#58; left; 
&#125;

#content &#123;
position&#58;relative;
width&#58;600px;
float&#58;left;
border&#58;green 1px solid;
&#125;

</style>

</head>
<body>

<div id="main">
<div id="content">
<a href="#">loglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglong</a> 
<p>Lorem ipsum dolor sit amet 
<a href="#">loglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglong</a> </p>
<table width="200" height="200" border="4">
  <tr>
    <td><a href="#">loglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglongloglonglonglognglong</a></td>
  </tr>
</table>
</div>
</div>
</body>
</html>
πώς θα κάνω το url να κάνει break και να συνεχίζει από κάτω; (να μην περνάει το div)
για το table δεν με ενδιαφέρει ιδιαίτερα αλλά άμα υπάρχει λύση καλό θα ήταν να το μάθουμε.
overflow:hidden is not an option, το ίδιο και το word-wrap:break-word, όπου δεν υποστηρίζεται από όλους τους browsers.

κάποια ιδέα? :-?

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

Long url πρόβλημα

Δημοσίευση από fafos » 20 Νοέμ 2009 18:22

an einai php h selida mporeis na to kaneis me strlen kai substr..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από sibas » 20 Νοέμ 2009 18:24

απλή html...

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από cherouvim » 20 Νοέμ 2009 18:40

Κώδικας: Επιλογή όλων

<a href="#">loglong<wbr/>loglong<wbr/>loglong<wbr/>loglong<wbr/>loglong<wbr/>loglong<wbr/>loglong<wbr/>loglong<wbr/>loglong<wbr/>loglong</a> 
http://www.quirksmode.org/oddsandends/wbr.html

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από sibas » 20 Νοέμ 2009 18:51

wbr δεν υπάρχει σε "Strict" mode

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από ThyClub » 20 Νοέμ 2009 19:39

Πρέπει να φαίνεται όλο το κείμενο του link? Δλδ με λίγη JS δεν θα μπορούσες να το κάνεις;

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από sibas » 20 Νοέμ 2009 20:41

κοίτα αν δεν θέλανε να φαίνεται όλο το link θα έβαζα το overflow και θα καθάριζα στο άψε σβήσε, πάντως πραγματικά κόλλησα με αυτό ψάχνω να βρω ένα σωρό σελίδες για να δω πως θα το διορθώσω, πρέπει να είναι το πιο χαζό πρόβλημα που μου έχει τύχει...

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από ThyClub » 20 Νοέμ 2009 20:45

Η λύση σου είναι js. Απλά βάλε να σπάει το λινκ ανά συγκεκριμένο αριθμό χαρακτήρων.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από korgr » 20 Νοέμ 2009 21:45

Μηπως βοηθαει κατι τετοιο?
http://www.hedgerwow.com/360/dhtml/css-word-break.html

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Long url πρόβλημα

Δημοσίευση από dimsis » 20 Νοέμ 2009 21:53

#content {
position:relative;
width:600px;
float:left;
border:green 1px solid;
word-wrap: break-word;
}

ώπα τώρα είδα που γράφεις δεν υποστηρίζεται από όλους. Άκυρο.
Από ποιους browsers δεν υποστηρίζεται; Σε ie 5.5, 6, 7,8 , fx 3.5, chrome 3 παίζει πάντως κανονικά.

Έβλεπα και εδώ και άλλες πιθανές λύσεις:
http://www.visibilityinherit.com/code/wrap-text.php

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από nbc » 20 Νοέμ 2009 22:29

Όπως προτάθηκε, η js είναι η μόνη λύση που σου απομένει αφού απέκλεισες όλες τις υπόλοιπες.

Για παράδειγμα (με jQuery):

Κώδικας: Επιλογή όλων

<script>
$&#40;function&#40;$&#41;&#123;$&#40;'a'&#41;.each&#40;function&#40;&#41;&#123;$&#40;this&#41;.html&#40;$&#40;this&#41;.text&#40;&#41;.replace&#40;/&#40;&#91;^\s-&#93;&#123;5&#125;&#41;&#40;&#91;^\s-&#93;&#123;5&#125;&#41;/g,'$1& #8203;&#8203;$2'&#41;&#41;&#125;&#41;;&#125;&#41;;
</script>
Μπορείς να αντικαταστήσεις το '& #8203;' με το '<wbr />' αν προτιμάς.

Με αυτήν τη γραμμούλα, καθαρίζεις :D

Σημ.: το κενό στο entity μπήκε επίτηδες για ευνόητους λόγους

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από sibas » 20 Νοέμ 2009 23:22

nbc νομίζω ότι δεν διαβάζεις το τι λέμε στην συζήτηση, το <wbr> δεν είναι valid σε Stirct.

dimsis το break-word δεν παίζει σε opera, και σε κάποιους browser για mobile.

Ελάτε ρε παιδιά αυτό είναι καθαρό html πρόβλημα, υπάρχουν χιλιάδες σελίδες που κάνουν break τα links χωρίς js php και χωρίς να έχουν κανένα tag
μου είναι αδιανόητο να έχω κολλήσει σε κάτι τόσο απλό :evil:

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από nbc » 21 Νοέμ 2009 09:35

Ναι, πες τη μου και από πάνω που σου δίνω λύση στο πιάτο.

Στο παράδειγμα σου έχω το non displayable space entity, το οποίο δουλεύει ως έχει. Σου πρότεινα το <wbr> ως εναλλακτική λύση, όχι υποχρεωτική. Αν γνώριζες καλύτερα, θα ήξερες ότι δεν θα έχεις πρόβλημα με το validation καθώς το tag εισάγεται με javascript.

Ωραία συμπεριφορά, εύγε!

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από sibas » 21 Νοέμ 2009 15:04

nbc σε ευχαριστώ πάρα πολύ για την προσφορά σου και για την λύση σου, να είσαι σίγουρος ότι αν χρειαστεί θα είναι από τα πρώτα πράγματα που θα βάλω αν αναγκαστώ να καταφύγω σε js.

σίγουρα δεν στην λέω, πολλές φορές μέσα σε ένα forum έχω δει να αρπάζονται κυριολεκτικά για το τίποτα μόνο και μόνο επειδή λείπει η παρουσία και είναι δύσκολο να καταλάβει το ύφος κανείς από τα γραπτά.

Εγώ είμαι «θυμωμένος» λόγου του ότι έχω κολλήσει σε ένα απλό πράγμα που γίνεται καθαρά μέσω html, αποφεύγω να χρησιμοποιώ javascript για ορισμένα πράγματα σαν και αυτό μιας και είναι αρκετοί χρήστες που έχουν το js off (συμπεριλαμβανομένου και έμενα).

Μια απλή λύση που βρήκα είναι να μπει space εκεί που θέλει κανείς να σπάσει το url κάπως έτσι.

Κώδικας: Επιλογή όλων

  <a href="#">loglonglonglognglongloglonglonglogngongloglonglonglogn
glongloglonglonglognglongloglonglonglognglongloglonglonglognglong</a>
ωστόσο αυτό δεν είναι αναγκαίο και είναι δύσκολο όταν είναι κάποιος να περάσει πολλά links να κάθεται και να υπολογίζει που θα βάλει space για να μη χαλάσει το site.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Long url πρόβλημα

Δημοσίευση από Basilakis » 22 Νοέμ 2009 20:02

sibas έγραψε:nbc νομίζω ότι δεν διαβάζεις το τι λέμε στην συζήτηση, το <wbr> δεν είναι valid σε Stirct.
Αυτά παθαίνει όταν τα θέλεις Strict :P

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης