Скрыть часть текста, вышедшего за пределы div

@Gauga · Регистрация: 04.07.2013

Студворк — интернет-сервис помощи студентам

Привет, мир!
Помогите пожалуйста, нужно сделать так как на картинке (уже перепробовал куча вариантов) исходя из этого кода:

HTML5
1
2
3
4
<div id="o1a">
    Здесь много текста ... blah-blah-blah-blah
    <div id="o2a"></div> 
</div>

Задумка такая, что тот текст, который находится внутри <div id="o1a"></div> должен скрываться при помощи display:none;. А в браузере отображаться внутри <div id="o2a"></div>, как на 3 рисунке (между этими тегами, <div id="o2a"></div> нельзя ставить текст).

Вот полная картина происходящего:

Скрыть часть текста, вышедшего за пределы div

P.S. Как такое вообще реализовать? Помогите пожалуйста.

@BigProgrammer · 29.12.2013, 17:27

Можете объяснить, почему между тегами <div id="o2a"></div> нельзя ставить текст?

@Gauga · 29.12.2013, 17:33 **[ТС]**

BigProgrammer, Необходимо создать блок, который бы имел наименьшую зависимость и делал то что указано на картинке.. Ибо так задумано...

P.S. Если можно было вставлять туда текст, то это бы облегчило мне учесть в разы.

@BigProgrammer · 29.12.2013, 17:39

Сообщение от Gauga

BigProgrammer, Необходимо создать блок, который бы имел наименьшую зависимость и делал то что указано на картинке.. Ибо так задумано...

P.S. Если можно было вставлять туда текст, то это бы облегчило мне учесть в разы.

Я не понял, что означает "имел наименьшую зависимость и делал то что указано на картинке".

@grisha2217 · 29.12.2013, 17:59

Сообщение от Gauga

имел наименьшую зависимость и делал то что указано на картинке

CSS
1
2
3
}
position: absolute
{

Вот и нет зависимости

@BigProgrammer · 29.12.2013, 18:05

Сообщение от grisha2217

Вот и нет зависимости

Хорошо, но что мешает вставить текст в этот блок?

@grisha2217 · 29.12.2013, 18:34

BigProgrammer, вы у меня спрашиваете? Я вообще не пойму, что за глупая задумка у автора

@Gauga · 29.12.2013, 19:50 **[ТС]**

grisha2217, этот вариант мне не подходит

Добавлено через 1 минуту

Сообщение от BigProgrammer

Хорошо, но что мешает вставить текст в этот блок?

этот вариант не подходит

Добавлено через 1 минуту

Сообщение от BigProgrammer

Я не понял, что означает "имел наименьшую зависимость и делал то что указано на картинке".

когда будет все готово, объясню... начну объяснять, возникнут еще куча вопросов... просто необходимо сделать именно с тем html кодом...

@BigProgrammer · 29.12.2013, 20:42

Сообщение от grisha2217

BigProgrammer, вы у меня спрашиваете? Я вообще не пойму, что за глупая задумка у автора

Извините, я вас перепутал с автором.

Добавлено через 2 минуты

Сообщение от Gauga

grisha2217, этот вариант мне не подходит

Добавлено через 1 минуту

этот вариант не подходит

Добавлено через 1 минуту

когда будет все готово, объясню... начну объяснять, возникнут еще куча вопросов... просто необходимо сделать именно с тем html кодом...

А можно вставить текст в #o2a с помощью скрипта?

@litvinov123 · 29.12.2013, 21:05

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
#o1a{
position: relative;
width:100px;
height:100px;
}
 
#o2a{
position:absolute;
top:0;
height:100%;
width:100%;
border:1px solid green;
}

Если чисто визуально, а так толко JavaScript

Добавлено через 3 минуты
Можеш еще поиграть с аболютами, ну там дать абсолют родителю, выдвинуть его подальше и сделать дисплей ноне, просто тут не охота никому решать школьные задачки, которые нигде не применяются.

@Gauga · 29.12.2013, 21:42 **[ТС]**

Сообщение от BigProgrammer

А можно вставить текст в #o2a с помощью скрипта?

да возможно, но хотелось бы на чистом css

Добавлено через 4 минуты
litvinov123,

Сообщение от Gauga

тот текст, который находится внутри <div id="o1a"></div> должен скрываться при помощи display:none;

С абсолютами я уже много раз пробовал, но конечный результат, должен быть чисто с применением свойства display:none;

@Academik · 30.12.2013, 14:53

Сообщение от Gauga

да возможно, но хотелось бы на чистом css

Такого на css не реализовать. Под ваши костыли скрипты нужны.

@Gauga · 30.12.2013, 16:12 **[ТС]**

35cm, ...можете пожалуйста сказать, в какую сторону мне рыть, чтоб такое реализовать?...

@Academik · 30.12.2013, 17:07

Я js не знаю к сожалению. Но вы не тем занимаетесь как мне кажется. Можете на самом деле сказать зачем/для чего вам это нужно?

fanatdebian · 30.12.2013, 19:44

Не понятно, что хочет добиться ТС.

Используй цветовую схему согласно background. К примеру у тебя есть диван с фоном белого цвета. Когда надо скрыть текст, присваиваешь ему

CSS
1
color: white;

- результат очевиден.

Есть еще пару-тройку вариантов, но все с использованием каскадов. Лениво рассказывать по мутно сформулированной задаче. Как будет конкретика - получишь и в ответ конкретный совет и решение задачи.

@Gauga · 30.12.2013, 20:35 **[ТС]**

Сообщение от 35cm

Можете на самом деле сказать зачем/для чего вам это нужно?

это очень долго объяснять ... думаю возникнут еще больше вопросов, если скажу

Добавлено через 1 минуту

Сообщение от fanatdebian

Когда надо скрыть текст, присваиваешь ему

нужно скрыть, а не сделать прозрачным...

Добавлено через 1 минуту

Сообщение от fanatdebian

Лениво рассказывать по мутно сформулированной задаче. Как будет конкретика - получишь и в ответ конкретный совет и решение задачи.

объяснил, вроди норм... даже картинку показал, как должно получится... как еще конкретней объяснить?...

P.S. Объясните мне как нужно изъяснятся, если меня не понять...

@BigProgrammer · 04.01.2014, 20:13

Сообщение от Gauga

35cm, ...можете пожалуйста сказать, в какую сторону мне рыть, чтоб такое реализовать?...

Я ведь выше написал:

А можно вставить текст в #o2a с помощью скрипта?

@sashok89 · 04.01.2014, 20:36

Gauga,
сперва объясните для чего это все нужно!!! А ответ долго объяснять не подходит. Хотите, чтобы вам помогли объясните суть.
Тут без JS ничего не получиться, могу написать скрипт, но пока не объясните зачем это нужно, я не буду делать ничего.

@Gauga · 04.01.2014, 23:25 **[ТС]**

sashok89, могу только в ЛС, и это будет слишком большое объяснение (в 3-5+к символов) и с разными изображениями.

Добавлено через 6 минут

Сообщение от BigProgrammer

А можно вставить текст в #o2a с помощью скрипта?

да я это видел, и поэтому написал так:

Сообщение от Gauga

P.S. Если можно было вставлять туда текст, то это бы облегчило мне учесть в разы.

Думал вы меня поняли, что этот вариант мне не подходит

@BigProgrammer · 05.01.2014, 01:31

Сообщение от Gauga

Добавлено через 6 минут

да я это видел, и поэтому написал так:

Думал вы меня поняли, что этот вариант мне не подходит

То есть даже скриптом нельзя туда вставлять текст? Скрипт ведь не обязательно должен быть внутри того блока.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@BigProgrammer 38 / 38 / 8 Регистрация: 20.07.2013 Сообщений: 105
	29.12.2013, 17:27
	Можете объяснить, почему между тегами <div id="o2a"></div> нельзя ставить текст? 1

@Gauga 25 / 25 / 6 Регистрация: 04.07.2013 Сообщений: 260
	29.12.2013, 17:33 [ТС]
	BigProgrammer, Необходимо создать блок, который бы имел наименьшую зависимость и делал то что указано на картинке.. Ибо так задумано... P.S. Если можно было вставлять туда текст, то это бы облегчило мне учесть в разы. 0

@grisha2217 21 / 21 / 10 Регистрация: 13.08.2013 Сообщений: 295
	29.12.2013, 18:34
	BigProgrammer, вы у меня спрашиваете? Я вообще не пойму, что за глупая задумка у автора 0

@Gauga 25 / 25 / 6 Регистрация: 04.07.2013 Сообщений: 260
	30.12.2013, 16:12 [ТС]
	35cm, ...можете пожалуйста сказать, в какую сторону мне рыть, чтоб такое реализовать?... 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	30.12.2013, 17:07
	Я js не знаю к сожалению. Но вы не тем занимаетесь как мне кажется. Можете на самом деле сказать зачем/для чего вам это нужно? 1

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	04.01.2014, 20:36
	Gauga, сперва объясните для чего это все нужно!!! А ответ долго объяснять не подходит. Хотите, чтобы вам помогли объясните суть. Тут без JS ничего не получиться, могу написать скрипт, но пока не объясните зачем это нужно, я не буду делать ничего. 1