4

есть простой тестовый блок. Который имеет width 0 но при клике добавление класса у него появляется width 40%. Т.е на подобие плавное появление блока и за ширины( блок прикреплен к левой части) И все бы хорошо но когда нужно скрыть блок, видно что тест и за того что место мало, начинает сжиматься. Можно как то это предотвратить

1
  • Здравствуйте. Вы так здорово всё описали, а примера вашего кода разве у вас нет? 28 дек 2018 в 16:02

3 ответа 3

4

Похоже, меня не услышали. Вам нужен white-space:nowrap

$("input").on("input", (e) => {
  $(".parent").css("width", $(e.target).val() * 2 + "px")
});
.parent {
  overflow: hidden;
  background:red;
  width:40px;
}

.child {
  white-space:nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Tenetur, deserunt!
  </div>
</div>

<input type="range" value=20>

0

Да, можно. Нужно текст поместить в отдельный блок, а сжимать родительский. При этом ширину дочернего элемента нужно задать жестко.

HTML

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Tenetur, deserunt!
  </div>
</div>

CSS

@keyframes roll-in {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

.parent {
  overflow: hidden;
  animation: roll-in 2s linear;
  animation-iteration-count: infinite;
}

.child {
  width: 300px;

}

jsfiddle

5
  • Егор в том то и проблема что в пкс не вариант))
    – Dan
    28 дек 2018 в 15:31
  • @Danielqwaqwaqwa Не понял, в чем не вариант? 28 дек 2018 в 15:33
  • Задать ширину в px
    – Dan
    28 дек 2018 в 15:34
  • @Danielqwaqwaqwa какой контекст? Как можно задавать ширину? 28 дек 2018 в 15:37
  • @Danielqwaqwaqwa тогда так 28 дек 2018 в 15:39
0

Ещё как вариант, смещать блок а не уменьшать. Но текст, должен быть обвёрнут в свой узел.

function spoler(_e){
	if(_e == window){
		spoler(_e.event.target || _e.event.srcElement)
	}
	else if(_e.getAttribute("class")){
		_e.removeAttribute("class")
	}
	else{
		_e.setAttribute("class", "close")
	}
}
DIV {
	position: relative;	
	border: #4a4a4a 3px solid;	
	overflow: hidden;
	width: 100%;
}
DIV SPAN {
	zoom:1; z-index: 1; position: relative; display:-moz-inline-stack; display: inline-block; //display: inline; vertical-align: middle; width: 100%;
}
DIV.close {
	left: -60%;
}
DIV.close SPAN{
	margin-left: 60%;
}
 <div onclick="spoler(this)"><span>есть простой тестовый блок. Который имеет width 0 но при клике добавление класса у него появляется width 40%. Т.е на подобие плавное появление блока и за ширины( блок прикреплен к левой части) И все бы хорошо но когда нужно скрыть блок, видно что тест и за того что место мало, начинает сжиматься. Можно как то это предотвратить</span>
  <span>следующий текстовый блок</span>
  </div>
  <div onclick="spoler(this)"><span>есть простой тестовый блок. Который имеет width 0 но при клике добавление класса у него появляется width 40%. Т.е на подобие плавное появление блока и за ширины( блок прикреплен к левой части) И все бы хорошо но когда нужно скрыть блок, видно что тест и за того что место мало, начинает сжиматься. Можно как то это предотвратить</span></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.