Javascript 在字符串中换行，使其不会'；不要离开这个盒子
为了了解我的问题，请参见以下内容： 这个问题来自一个XML数据，当它太长而无法放入灰色框时，它应该有一个换行符。我试过两种方法，但都没有效果 如果通过为每个问题手动在XML中添加换行符来解决问题更容易，那么我不需要动态解决方案，但我不知道如何解决Javascript 在字符串中换行，使其不会'；不要离开这个盒子,javascript,php,xml,Javascript,Php,Xml,为了了解我的问题，请参见以下内容： 这个问题来自一个XML数据，当它太长而无法放入灰色框时，它应该有一个换行符。我试过两种方法，但都没有效果 如果通过为每个问题手动在XML中添加换行符来解决问题更容易，那么我不需要动态解决方案，但我不知道如何解决 <!DOCTYPE HTML> <html> <head> <style> body {background-image:url('bgimg.jpg'
<!DOCTYPE HTML>
<html>
<head>
<style>
body {background-image:url('bgimg.jpg');
background-size:100%;}
#ccontainer{
width:550px;
margin: 0 auto;
margin-top:100px;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var quizbg = new Image();
var Question = new String;
var Option1 = new String;
var Option2 = new String;
var Option3 = new String;
var mx = 0;
var my = 0;
var CorrectAnswer = 0;
var qnumber = 0;
var rightanswers = 0;
var wronganswers = 0;
var QuizFinished = false;
var lock = false;
var textpos1 = 45;
var textpos2 = 145;
var textpos3 = 230;
var textpos4 = 325;
var Questions = new Array;
var Options = new Array;
var textArray = new Array('line2', 'line3', 'line4', 'line5');
var rows = 98;
<?php
$datastr = "data".$_GET["p"].".xml";
$xml = simplexml_load_file($datastr);
$counter= count($xml);
for($i=0;$i<$counter;$i++){
echo "Questions[".$i."]='".$xml-> task[$i]->question ."';";
echo "\n";
echo "Options[".$i."]=['".$xml-> task[$i]->option[0] ."','";
echo $xml-> task[$i]->option[1] ."','";
echo $xml-> task[$i]->option[2]."'];";
echo "\n";
}
?>
quizbg.onload = function(){
context.drawImage(quizbg, 0, 0);
SetQuestions();
}//Spiel Hintergrund
quizbg.src = "quizbg2.png";
SetQuestions = function(){
Question=Questions[qnumber];
CorrectAnswer=1+Math.floor(Math.random()*3);
if(CorrectAnswer==1){Option1=Options[qnumber][0];Option2=Options[qnumber][1];Option3=Options[qnumber][2];}
if(CorrectAnswer==2){Option1=Options[qnumber][2];Option2=Options[qnumber][0];Option3=Options[qnumber][1];}
if(CorrectAnswer==3){Option1=Options[qnumber][1];Option2=Options[qnumber][2];Option3=Options[qnumber][0];}
context.textBaseline = "middle";
context.font = "18pt Calibri,Arial";
context.fillText(Question,20,textpos1);
context.font = "18pt Calibri,Arial";
context.fillText(Option1,20,textpos2);
context.fillText(Option2,20,textpos3);
context.fillText(Option3,20,textpos4);
}//Erzeugt Fragen
canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(ev) {
mx=ev.x-canvas.offsetLeft;
my=ev.y-canvas.offsetTop;
if(ev.x == undefined){
mx = ev.pageX - canvas.offsetLeft;
my = ev.pageY - canvas.offsetTop;
}
if(lock){
ResetQ();
}//if lock
else{
if(my>110 && my<180){GetFeedback(1);}
if(my>200 && my<270){GetFeedback(2);}
if(my>290 && my<360){GetFeedback(3);}
}//!lock
}//ProcessClick
GetFeedback = function(a){
if(a==CorrectAnswer){
document.getElementById('ra').play();
context.drawImage(quizbg, 0,400,75,70,480,110+(90*(a-1)),75,70);
rightanswers++;//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
}
else{
document.getElementById('wa').play();
context.drawImage(quizbg, 75,400,75,70,480,110+(90*(a-1)),75,70);
wronganswers++;
}
lock=true;
context.font = "14pt Calibri,Arial";
context.fillText("Nochmal Klicken zur nächsten Frage ",20,380);
}//get feedback
ResetQ= function(){
lock=false;
context.clearRect(0,0,550,400);
qnumber++;
if(qnumber==Questions.length){
EndQuiz();
}
else{
context.drawImage(quizbg, 0, 0);
SetQuestions();
}
}
EndQuiz=function(){
canvas.removeEventListener('click',ProcessClick,false);
context.drawImage(quizbg, 0,0,550,90,0,0,550,400);
context.font = "20pt Calibri,Arial";
context.fillText("Deine Prüfung ist vorbei!",20,100);
context.font = "16pt Calibri,Arial";
context.fillText("Richtige Antworten: "+String(rightanswers),20,200);
context.fillText("Falsche Antworten: "+String(wronganswers),20,240);
}
};// Läd das Spiel
</script>
</head>
<body>
<audio src="righta.mp3" id="ra"></audio>
<audio src="wronga2.mp3" id="wa"></audio>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#show").click(function() {
$("p").toggle();
});
});// zeigt/versteckt hintergrund musikplayer wenn versteckt/offen
</script>
<button id="show">Musik</button>
<p hidden>
<audio controls autoplay controls loop>
<source src="Hitman Blood Money - Jesper Kyd - Amb Zone.mp3" type="audio/mpeg">
</audio>
</p>
<div id="ccontainer">
<canvas id="myCanvas" width="550" height="400"></canvas>
</div>
</body>
</html>
body{背景图像：url（'bgimg.jpg'）；
背景大小：100%；}
#容器{
宽度：550px；
保证金：0自动；
边缘顶部：100px；
}
window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var quizbg=新图像（）；
var问题=新字符串；
var Option1=新字符串；
var Option2=新字符串；
var Option3=新字符串；
var-mx=0；
var-my=0；
var CorrectAnswer=0；
变量qnumber=0；
var rightanswers=0；
var=0；
var QuizFinished=假；
var-lock=false；
var textpos1=45；
var textpos2=145；
var textpos3=230；
var textpos4=325；
var问题=新数组；
var选项=新数组；
var textArray=新数组（'line2'，'line3'，'line4'，'line5'）；
var行=98；
问题；
回音“\n”；
echo“Options[”$i.“]=[””$xml->task[$i]->option[0]。“，”；
echo$xml->task[$i]->选项[1]。“，”；
echo$xml->task[$i]->选项[2]。“]]；”；
回音“\n”；
}
?>
quizbg.onload=函数（）{
drawImage（quizbg，0,0）；
设置问题（）；
}//斯皮尔暗示
quizbg.src=“quizbg2.png”；
SetQuestions=函数（）{
问题=问题[qnumber]；
CorrectAnswer=1+Math.floor（Math.random（）*3）；
如果（CorrectAnswer==1）{Option1=Options[qnumber][0]；Option2=Options[qnumber][1]；Option3=Options[qnumber][2]；}
如果（CorrectAnswer==2）{Option1=Options[qnumber][2]；Option2=Options[qnumber][0]；Option3=Options[qnumber][1]；}
如果（CorrectAnswer==3）{Option1=Options[qnumber][1]；Option2=Options[qnumber][2]；Option3=Options[qnumber][0]；}
context.textb基线=“中间”；
context.font=“18pt Calibri，Arial”；
上下文。填充文本（问题，20，文本位置1）；
context.font=“18pt Calibri，Arial”；
context.fillText（选项1,20，textpos2）；
context.fillText（选项2,20，textpos3）；
上下文。填充文本（选项3,20，文本位置4）；
}//弗雷根
canvas.addEventListener（'click'，ProcessClick，false）；
功能过程点击（ev）{
mx=ev.x-canvas.offsetLeft；
my=ev.y-canvas.offsetTop；
如果（ev.x==未定义）{
mx=ev.pageX-canvas.offsetLeft；
my=ev.pageY-canvas.offsetTop；
}
如果（锁定）{
ResetQ（）；
}//如果锁定
否则{
如果（my>110&&my200&&my290&&mytry）而不是（my>110&&my200&&my290&&mytry）
听起来像是一个家庭作业。
一个\n不工作，也不是一个家庭作业
<?xml version="1.0" encoding="ISO-8859-1"?>
<All>
<task>
<question>Question here if too long leavs the box like this asdasdasdasdasdasdasdasd</question>
<option>need a line break</option>
<option>option 2</option>
<option>option 3</option>
</task>
</All>