Как сделать что бы текст не переносился?

#javascript #вёрстка

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

Ответы

Ответ 1

Похоже, меня не услышали. Вам нужен 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;
}





  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Tenetur, deserunt!
  





Ответ 2

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

HTML


  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Tenetur, deserunt!
  



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


Ответ 3

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



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%;
}
 
есть простой тестовый блок. Который имеет width
0 но при клике добавление класса у него появляется width 40%. Т.е на подобие плавное
появление блока и за ширины( блок прикреплен к левой части) И все бы хорошо но когда
нужно скрыть блок, видно что тест и за того что место мало, начинает сжиматься. Можно
как то это предотвратить
  следующий текстовый блок
  
  
есть простой тестовый блок. Который имеет width
0 но при клике добавление класса у него появляется width 40%. Т.е на подобие плавное
появление блока и за ширины( блок прикреплен к левой части) И все бы хорошо но когда
нужно скрыть блок, видно что тест и за того что место мало, начинает сжиматься. Можно
как то это предотвратить