مبتدی: بیرون زدگی متن از محل تعریف شده [بایگانی]

mostafae

دوشنبه 05 خرداد 1393, 14:06 عصر

سلام. من یه باکس درست کردم و به اون عرض ثابت و ارتفاع auto دادم. یه div داخل اون درست کردم و متن رو داخل اون قرار دادم و بهش عرض ثابت دادم (که کمتر از عرض باکس هست) اما نمیدونم چرا وقتی متن زیاد میشه از کادر میزنه بیرون؟؟؟

parvizwpf

دوشنبه 05 خرداد 1393, 14:21 عصر

توی دیوها تست کنید overflow:hidden

mahdi programer

پنج شنبه 08 خرداد 1393, 00:27 صبح

این یه مثال رو نگاه :

CSS Style :

.parent

{
height: auto;
width: 500px;
border: 2px #000000 solid
}

.child

{
width: 400px;
border: 2px #000000 solid;
margin: 10px;
}

HTML :

<div class="parent">
<div class="child">

متن مورد نظر

</div>
</div>

Omid Jackson

پنج شنبه 08 خرداد 1393, 01:32 صبح

به تگ سی اس اس فرزند این رو اضافه کنین
word-wrap: break-word;

ab.ali

پنج شنبه 08 خرداد 1393, 10:40 صبح

width فرزند رو auto بزارین!

vimax23

پنج شنبه 08 خرداد 1393, 13:49 عصر

اگر یوزر تو اون دیو روی کیبورد کامپیوترش روی یه کرکتر مداوم نگه داشته باشه هیچ راهی نداره
راههای ذکر شده فقط زمانی هست که یوزر کرکتر وارد میکنه اینتر کنه یا از اسپیس بار استفاده کنه با break-all هم نمیشه

Omid Jackson

پنج شنبه 08 خرداد 1393, 15:21 عصر

اگر یوزر تو اون دیو روی کیبورد کامپیوترش روی یه کرکتر مداوم نگه داشته باشه هیچ راهی نداره
راههای ذکر شده فقط زمانی هست که یوزر کرکتر وارد میکنه اینتر کنه یا از اسپیس بار استفاده کنه با break-all هم نمیشه

تا جایی که من میدونم باید با word-break یا word-wrap جواب بده
http://jsfiddle.net/Blend_Design/GyVbq/
این با word-wrap که هیچ مشکلی نداره، حالا نمیدونم شما چرا میگین نمیشه، شاید هم من اشتباه متوجه شدم سوال رو

Omid Jackson

پنج شنبه 08 خرداد 1393, 15:28 عصر

اگر یوزر تو اون دیو روی کیبورد کامپیوترش روی یه کرکتر مداوم نگه داشته باشه هیچ راهی نداره
راههای ذکر شده فقط زمانی هست که یوزر کرکتر وارد میکنه اینتر کنه یا از اسپیس بار استفاده کنه با break-all هم نمیشه

این هم یه مثال برای word-wrap و word-break که کاراییش رو ببینین
http://jsfiddle.net/Blend_Design/nLE87/

vimax23

پنج شنبه 08 خرداد 1393, 20:31 عصر

این هم یه مثال برای word-wrap و word-break که کاراییش رو ببینین
http://jsfiddle.net/Blend_Design/nLE87/

نه کار نمیکنه!
من اینو تو stackoverflow هم پرسیدم راهی پیدا نشد ، اینجا هم یه بار گفتم نمیشه ببین اینو
http://jsfiddle.net/nLE87/3/
حروف فارسی رو میشکنه و این شکستن بعضی کلمات رو جدا میکنه تو دیو اول ببین واضح هست
من خودم خیلی دنبالش گشتم ولی پیدا نکردم

Omid Jackson

پنج شنبه 08 خرداد 1393, 20:49 عصر

نه کار نمیکنه!
من اینو تو stackoverflow هم پرسیدم راهی پیدا نشد ، اینجا هم یه بار گفتم نمیشه ببین اینو
http://jsfiddle.net/nLE87/3/
حروف فارسی رو میشکنه و این شکستن بعضی کلمات رو جدا میکنه تو دیو اول ببین واضح هست
من خودم خیلی دنبالش گشتم ولی پیدا نکردم
آهان الآن متوجه شدم
خب دلیل هم اینه که حروف میچسبن به همدیگه، یه راهی توی ذهنم هست ولی باید صبر کنید ببینم شدنی هست یا نه

vimax23

پنج شنبه 08 خرداد 1393, 21:35 عصر

آهان الآن متوجه شدم
خب دلیل هم اینه که حروف میچسبن به همدیگه، یه راهی توی ذهنم هست ولی باید صبر کنید ببینم شدنی هست یا نه

اگر پیدا کردی ممنون میشم اشتراک بزاری اینجا
من چند هفته دنبال همین بودم بالاخره بی خیال شدم به این بسنده کردم که شاید یوزر این کار رو نکنه در حالی که این فرض تو طراحی اشتباه هست
همین الان همه سایت های ایرانی رو نگاه کنی شما این مشکل رو دارن تو دیزاین من یه سایت ندیدم این مشکل رو نداشته باشه که بشه از توش در آورد

qartalonline

پنج شنبه 08 خرداد 1393, 22:30 عصر

از word-wrap: break-word; به تنهایی استفاده کنید. در این حالت کلمه رو نمیشکنه مگر اینکه طولانی تر از عرض سطر باشه، کلمه شکسته شده هم در برخی از مرورگرها مثل فایرفاکس مشخصه ولی در کروم حروف از هم جدا میشن که این برمیگرده به ماهیت املای زبان فارسی و مرورگرها.

<!DOCTYPE html>
<html>
<head>
<title>break word test</title>
<meta charset="UTF-8">
<style type="text/css">
*{
direction: rtl;
}
.test{
width: 100px;
overflow: hidden;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="test">
تست تست تست تست تست تست تست تست تست تست
تتتتتتتتتتتتتتتتتتتتتتتتت تتتتتتسسسسسسسسسسسستتتتتتت
</div>
</body>
</html>

Omid Jackson

پنج شنبه 08 خرداد 1393, 23:57 عصر

برای این کار که دوستمون گفتن من یه کدی نوشتم ولی نه از لحاظه به صرفه بودن نه تمیز بودن به دلم ننشست :لبخند:
http://jsfiddle.net/Blend_Design/A2Rm7/
خلاصه که خیلی جالب نشد و فقط برای تست هست شاید از توش چیزی که بخواین در بیاد

vimax23

جمعه 09 خرداد 1393, 00:45 صبح

از word-wrap: break-word; به تنهایی استفاده کنید. در این حالت کلمه رو نمیشکنه مگر اینکه طولانی تر از عرض سطر باشه، کلمه شکسته شده هم در برخی از مرورگرها مثل فایرفاکس مشخصه ولی در کروم حروف از هم جدا میشن که این برمیگرده به ماهیت املای زبان فارسی و مرورگرها.

<!DOCTYPE html>
<html>
<head>
<title>break word test</title>
<meta charset="UTF-8">
<style type="text/css">
*{
direction: rtl;
}
.test{
width: 100px;
overflow: hidden;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="test">
تست تست تست تست تست تست تست تست تست تست
تتتتتتتتتتتتتتتتتتتتتتتتت تتتتتتسسسسسسسسسسسستتتتتتت
</div>
</body>
</html>

آره ، اما بازم نمیشه که فایرفاکس رو بی خیال شد
در کل واقعا فکر میکنم راهی نداره

برای این کار که دوستمون گفتن من یه کدی نوشتم ولی نه از لحاظه به صرفه بودن نه تمیز بودن به دلم ننشست :لبخند:
http://jsfiddle.net/Blend_Design/A2Rm7/
خلاصه که خیلی جالب نشد و فقط برای تست هست شاید از توش چیزی که بخواین در بیاد
فرقی نکرد:لبخند:

vimax23

جمعه 09 خرداد 1393, 00:47 صبح

برای این کار که دوستمون گفتن من یه کدی نوشتم ولی نه از لحاظه به صرفه بودن نه تمیز بودن به دلم ننشست :لبخند:
http://jsfiddle.net/Blend_Design/A2Rm7/
خلاصه که خیلی جالب نشد و فقط برای تست هست شاید از توش چیزی که بخواین در بیاد

میگم یه چیزی اگر یه بلایی سر این دش بیاریم چی :لبخند:

Omid Jackson

جمعه 09 خرداد 1393, 13:36 عصر

میگم یه چیزی اگر یه بلایی سر این دش بیاریم چی :لبخند:

خب دش رو از قصد گذاشتم که اگر کلمه ادامش رفت خط بعدی دش بذاره، میتونیم کلا حذفش کنیم
ولی تو این کد نویسی یه بدی داره، من میام مثلا اندازه حرف 'ل' رو میگیرم با فونت و سایزش، بعد اگر این حرف وسط کلمه باشه میشه 'لـ' که کوچکتره، برا همین دقیقا اندازه ها یکی نمیشه، حالا باید یه فکر دیگه کرد براش
ولی خب دقیقا من نفهمیدم چه راه حلی برای این مشکل پیدا کنیم بهتره