Question

如何在select的两行中对齐部分文本？

我需要对齐两行，每行中的字符数相同。每行以字符“ |”结尾对齐。例如：

Lorem Ipsum alternative | other text
Lorem Ipsum             | other text

$strdocumento="Lorem Ipsum alternative";
$strdocumento=str_pad($strdocumento, 50, '!', STR_PAD_RIGHT)."***";
$strdocumento=str_replace("!"," ",$strdocumento);

echo $strdocumento."|<br>";

//Line 2

$strdocumento="Lorem Ipsum ";
$strdocumento=str_pad($strdocumento, 50, '!', STR_PAD_RIGHT)."***";
$strdocumento=str_replace("!"," ",$strdocumento);

echo $strdocumento."|<br>";

Answer 1

要正确对齐，您可以为其定义div和CSS样式

echo '<div class="alignRight">'.$strdocumento.'|</div>';

css

div.alignRight{
  text-align:right;
  width: 15ch;//to place same number of characters in a line 
  display: block;
  float:;//you can add any css style to it and it works
}

编辑我知道它不是一个完美的答案，因为 Option 元素不能有任何子元素，但是您始终可以进行替代/伪选择 plugin

如果您想在选择过程中做到这一点而不伪造它，那么这就是我的代码

仅当字体是等距（http://en.wikipedia.org/wiki/Monospaced_font）时，它才能正常工作

<style type="text/css">
select { font-family: 'Courier',serif; }
</style>

定义上面的select js脚本，以便它可以标识选择

<select id="mySelect"></select>

现在在这里将所有变量放置在数组中，并找到最长字符串的长度，直到字符-“ |”并减去其他最长的字符串，以添加那么多空格

<script type="text/javascript">

    // var string1 = '<?php //echo $strdocumento_1;?>';
    // var string2 = '<?php //echo $strdocumento_2;?>';
    var string1 = 'Lorem Ipsum alternative | Other Text';
    var string2 = 'Lorem Ipsum | Other Text';
    //you can use for loop or while loop in your php

    var arrToFindLengthOfLongestString = [string1.substr(0, string1.indexOf('|')), string2.substr(0, string2.indexOf('|'))];

    var longestLength = arrToFindLengthOfLongestString.sort(function (a, b) { return b.length - a.length; })[0].length;

    for (var i = 0; i < arrToFindLengthOfLongestString.length; i++) {
        for (var j = arrToFindLengthOfLongestString[i].length; j <= longestLength; j++) {
            arrToFindLengthOfLongestString[i]=arrToFindLengthOfLongestString[i]+"\xa0";
        }
        arrToFindLengthOfLongestString[i] = arrToFindLengthOfLongestString[i]+"|";
        // alert(arrToFindLengthOfLongestString[i]);
    }

    var arrForOption = [{
        text: arrToFindLengthOfLongestString[0]+'your other text',//you can use loop if there are more variables
        value: 'your value'
    }, {
        text: arrToFindLengthOfLongestString[1]+'your other text',//
        value: 'yourvalue'
    }];


var select = document.getElementById('mySelect');

// Iterate over array
arrForOption.forEach(function (obj, i) {
    // Create new <option> with dynamic value and text
    // Add the <option> to the <select>
    select.appendChild(new Option(obj.text, obj.value));
});
</script>

如何在select中的<option>内对齐部分文本

1 个答案: