在标签中断词。

8 浏览
0 Comments

在标签中断词。

我想要能够显示

元素中包含的整个文本。\n您可以在这里进行测试：\n

$(document).ready(function(){
	var users = [],
	shuffled = [],
	loadout = $("#loadout"),
	insert_times = 30,
	duration_time = 10000;
	$("#roll").click(function(){
		users = [];
		var lines = "Excepteur sint occaecat cupidatat non proident \n adipiscing elit, sed do eiusmod tempor incididunt".split('\n')
		if(lines.length < 2){
			$("#msgbox").slideToggle(100);
			setTimeout(function() {
				  $("#msgbox").slideToggle(100);
			}, 3000);
			return false;
		}
		for(var i = 0;i < lines.length;i++){
			if(lines[i].length > 0){
				users.push(lines[i]);
			}
		}
		$("#roll").attr("disabled",true);
		var scrollsize = 0,
		diff = 0;
		$(loadout).html("");
		$("#log").html("");
		loadout.css("left","100%");
		if(users.length < 10){
			insert_times = 20;
			duration_time = 5000;
		}else{
			insert_times = 10;
			duration_time = 10000;
		}
		for(var times = 0; times < insert_times;times++){
			shuffled = users;
			shuffled.shuffle();
			for(var i = 0;i < users.length;i++){
				loadout.append(''+shuffled[i]+'');
				scrollsize = scrollsize + 192;
			}
		}
		
		
		diff = Math.round(scrollsize /2);
		diff = randomEx(diff - 300,diff + 300);
		$( "#loadout" ).animate({
			left: "-="+diff
		},  duration_time, function() {
			$("#roll").attr("disabled",false);
			$('#loadout').children('td').each(function () {
				var center = window.innerWidth / 2;
				if($(this).offset().left < center && $(this).offset().left + 185 > center){
					var text = $(this).children().text();
					$("#log").append("THE WINNER IS "+text+"");
					
				}
				
			});
		});
	});
	Array.prototype.shuffle = function(){
		var counter = this.length, temp, index;
		while (counter > 0) {
			index = (Math.random() * counter--) | 0;
			temp = this[counter];
			this[counter] = this[index];
			this[index] = temp;
		}
	}
	function randomEx(min,max)
	{
		return Math.floor(Math.random()*(max-min+1)+min);
	}
});

\n

.topbox{
	background:white;
	padding-bottom:40px;
}
.rollbox{
    width:100%;
	height:200px;
	background:white;
	border:1px solid #eb3b5a;
    border-radius: 5px;
	overflow-x:auto;
	overflow:hidden;
	position:relative;
	padding:0;
}
.rollbox > table{
    background-color: yellow;
	width:auto;
	height:200px;
	margin:0;
	padding:0;
	
}
#loadout{
	position:absolute;
	top:10px;
	left:5px;
	z-index:1;
	background:#121619;
}
.roller {
    border-right:1px solid white;
	position:relative;
	display: block;
	height:100%;
	text-align:center;
    color:white;
	line-height:180px;
	font-size:0.8em;
	font-weight:bold;
	font-family:sans-serif;
}
.roller div{
	display:block;
	height:50px;
	line-height:50px;
	position:absolute;
	bottom:0;
	width:100%;
	left:0;
	
}
.badge{
	padding-top:5px;
	text-shadow:1px 1px 1px black;
	margin-bottom:20px;
}
.line{
	width:2px;
	height:198px;
	top:1px;
	left:50%;
	position:absolute;
	background:#eb3b5a;
	opacity:0.6;
	z-index:2;
	
}
.roller{
	height:180px;
	
	width:180px;
	margin-right:10px;
	background:url(http://re3ker.de/raffle/images/purple.jpg);
}
tr,table,td{
	margin:0;
	padding:0;
}
td:nth-child(even) .roller{
	background:url(http://re3ker.de/raffle/images/blue.jpg);
}

\n



      
               

                  
                     

                        
                              
                        
                     

                  
               

               You need to add at least 2 lines!

\n包含的文本是\n

Excepteur sint occaecat cupidatat non proident

\n和\nadipiscing elit, sed do eiusmod tempor incididunt\n\n我尝试使用

，但它不能断行。\n以下是黑色框生成的位置：\n

loadout.append(''+shuffled[i]+'');

0

1 答案

0 Comments

在上述代码中，出现了(Break word in

tag)这个问题。问题的原因是在CSS样式表中，没有为包含在

标签中的文本进行断词处理。解决这个问题的方法是在`.roller div`的CSS样式中添加`word-break: break-word`属性。这样可以确保文本在达到容器宽度时会被正确地断开，并在下一行继续显示。

以下是解决问题的代码：

.roller div{
    display:block;
    height:50px;
    line-height:normal;
    position:absolute;
    bottom:0;
    width:100%;
    left:0;
    word-break: break-word;
}

通过将这段代码添加到CSS样式表中，可以解决在

标签中断词的问题。这样，当文本内容超出容器宽度时，会自动在合适的位置进行断词处理，确保文本的可读性和布局的美观性。

0